:root {
    --vertical-rythm: 0.5rem;
    --spacing: 0.5rem;
    --output-viz-spinner-size: 4rem;
    --output-viz-spinner-speed: 1.1s;
    /* Zelfde kolombreedte voor KPI/tabel, ATG-grafiek en hoofdgrafiek (+20% t.o.v. 960px) */
    --results-viz-max-width: 1152px;

    --font-stack: "Arial", sans-serif;

    --orange: #ee7601;
    --orange-dark: #e84b0f;
}

html {
    font-family: var(--font-stack);
    color: #222;
}

footer {
    margin-top: 6rem;
}

h2 {
    font-size: 150%;
}


main {
    max-width: 1344px;
    margin: auto;
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
}

main .main-content {
    display: flex;
    flex-grow: 1;
    min-height: 0;
}

.project-title-bar {
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.project-title-input {
    font-size: 1.75rem;
    font-weight: 700;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 0.35rem 0.5rem;
    background: transparent;
    color: inherit;
    font-family: var(--font-stack);
    -webkit-user-select: text;
    user-select: text;
}

.project-title-input:hover {
    border-color: #ccc;
    background: #fafafa;
}

.project-title-input:focus {
    outline: none;
    border-color: var(--orange);
    background: #fff;
}

summary {
    cursor: pointer;
    user-select: none;
    margin-bottom: var(--vertical-rythm);
}

summary:hover {
    text-decoration: underline;
}

main .main-content .controls {
    width: 24rem;
    flex-grow: 0;
    flex-shrink: 0;
    margin-right: 1rem;
}

.controls > * + * {
    margin-top: calc(3 * var(--vertical-rythm));
}

.controls h3 {
    font-size: 100%;
    font-weight: bold;
}

.controls .group > * + *,
.controls .group details > * + * {
    margin-top: var(--vertical-rythm);
}

.controls .group details * + .control--spaced {
    margin-top: calc(3 * var(--vertical-rythm));
}

/* Inklapbare invoergroepen (zelfde patroon als Tekentool) */
.controls .building-configuration {
    margin-bottom: var(--vertical-rythm);
}

.controls .building-configuration > * + * {
    margin-top: var(--vertical-rythm);
}

.controls .building-configuration h3 {
    display: inline;
}

.controls .building-configuration .config-group {
    background-color: #e8e8e8;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.controls .building-configuration .config-group > summary {
    padding: 0.5rem;
    margin-bottom: 0;
    list-style-position: outside;
}

.controls .building-configuration .config-group > summary:hover {
    text-decoration: none;
}

.controls .building-configuration .config-group .config-shortline {
    display: block;
    font-size: 80%;
    color: #555;
    margin-left: 1.4rem;
    margin-top: 0.2rem;
    line-height: 1.35;
    word-break: break-word;
}

.controls .building-configuration .config-group[open] .config-shortline {
    display: none;
}

.controls .building-configuration .config-group[open] > summary {
    border-bottom: 1px solid #ccc;
}

.controls .building-configuration .config-group:hover h3,
.controls .building-configuration .config-group[open] h3 {
    color: var(--orange);
}

.controls .building-configuration .config-group > .config-body {
    padding: 0.5rem;
}

.controls .building-configuration .config-group .config-body > * + * {
    margin-top: var(--vertical-rythm);
}

.controls .building-configuration .config-body .isolatie-details > * + *,
.controls .building-configuration .config-body .bezetting-details > * + * {
    margin-top: var(--vertical-rythm);
}


.control label {
    display: block;
}

.control label.todo {
    color: var(--orange);
}

.control input, select {
    width: 14rem;
    max-width: 100%;
    box-sizing: border-box;
}

.controls .building-configuration select {
    width: 100%;
    max-width: 100%;
}

/* Automatische toevoertemp bij 0 °C (dynamische COP): suggestie als placeholder */
#toevoertemperatuur-verwarmen-bij-0C::placeholder {
    color: #b8b8b8;
    opacity: 1;
}

.control .elaboration {
    font-size: 80%;
}



.todo-list {
    color: var(--orange);
    margin-bottom: var(--vertical-rythm);
}

.todo-list ul {
    margin-top: var(--vertical-rythm);
}

.todo-list ul > li {
    margin-top: calc(0.5 * var(--vertical-rythm));
}



main .main-content .results {
    flex-grow: 1;
    min-width: 0;
}

.results h2 {
    text-align: center;
    margin-bottom: calc(4 * var(--vertical-rythm));
}

.results:not(.show-placeholders) #results-placeholders-summary,
.results:not(.show-placeholders) #results-placeholders-atg {
    display: none;
}

.results.show-placeholders #results-container-summary,
.results.show-placeholders #results-container-atg {
    display: none;
}

/* Gedeelde uitlijning met ATG-grafiek */
.results-viz-column {
    width: 100%;
    max-width: var(--results-viz-max-width);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.results-overview-wrap {
    margin-bottom: calc(2.5 * var(--vertical-rythm));
}

/* Compact KPI-tabel: niet de brede maandgrafiek-tabelstijl (.results table). */
.results .results-overview-wrap table.overview {
    display: inline-table;
    width: max-content;
    max-width: 100%;
    margin: 0 0 calc(0.5 * var(--vertical-rythm)) 0;
    border-collapse: collapse;
    table-layout: auto;
}

.results .results-overview-wrap table.overview th,
.results .results-overview-wrap table.overview td {
    border: none;
    background: transparent;
    padding: 0.2rem 0;
    vertical-align: baseline;
}

.results .results-overview-wrap table.overview tr:first-child th,
.results .results-overview-wrap table.overview tr:last-child th,
.results .results-overview-wrap table.overview tr:last-child td {
    border: none;
}

.results .results-overview-wrap table.overview tr:nth-child(even) th,
.results .results-overview-wrap table.overview tr:nth-child(even) td {
    background: transparent;
}

.results-overview-wrap .overview th.metric {
    text-align: left;
    font-weight: 600;
    padding-right: 1.25rem;
    white-space: nowrap;
}

.results-overview-wrap .overview td.value,
.results-overview-wrap .overview td.numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
    padding-left: 0.5rem;
    padding-right: 0.35rem;
    white-space: nowrap;
    border-right: none;
}

.results-overview-wrap .overview td.unit {
    text-align: left;
    color: #666;
    padding-left: 0;
    white-space: nowrap;
}

.results-overview-wrap .calculation-results-status {
    margin-top: 0.5rem;
    color: #666;
}

.results-summary-wrap {
    margin-bottom: calc(2 * var(--vertical-rythm));
}

.results-atg-wrap {
    margin-bottom: calc(2 * var(--vertical-rythm));
}

.results .block {
    /* 1) Margins determined for alignment of contained children with non-blocked graphs */
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(95px - 0.2rem);   /* (1) */
    margin-right: calc(75px - 0.2rem);  /* (1) */
}

.results .block > * {
    margin-left: 0.2rem;
    margin-right: 0.2rem;
}

.results .block > :first-child:nth-last-child(1),
.results .block > :nth-last-child(1) ~ * {
    width: calc(100% / 1 - 2 * 0.2rem);
}

.results .block > :first-child:nth-last-child(2),
.results .block > :nth-last-child(2) ~ * {
    width: calc(100% / 2 - 2 * 0.2rem);
}

.results .block > :first-child:nth-last-child(3),
.results .block > :nth-last-child(3) ~ * {
    width: calc(100% / 3 - 2 * 0.2rem);
}

.results .block > :first-child:nth-last-child(4),
.results .block > :nth-last-child(4) ~ * {
    width: calc(100% / 4 - 2 * 0.2rem);
}


.results .field {
    margin-bottom: var(--vertical-rythm);
    --spinner-size: 1rem;
    --spinner-speed: 0.8s;
}

.results .field .label {
    font-weight: bold;
}

.results .field.placeholder {
    border-radius: 3px;
    background-image: linear-gradient(#ececec, #f4f4f4);
}

.results .field.placeholder .label,
.results .field.placeholder .value {
    visibility: hidden;
}


.results table {
    /* 1) Margins determined for alignment of contained children with non-blocked graphs */
    margin-left: calc(95px);   /* (1) */
    margin-right: calc(75px);  /* (1) */
    border-collapse: collapse;
    margin-top: var(--vertical-rythm);
    margin-bottom: var(--vertical-rythm);
}

.results table tr:first-child th {
    border-bottom: 1px solid #ccc;
}
.results table tr:last-child th,
.results table tr:last-child td {
    border-top: 1px solid #ccc;
}

.results table tr:nth-child(even) th,
.results table tr:nth-child(even) td {
    color-adjust: exact;
    background-color: #eee;
}

.results table th,
.results table td {
    padding: 0.2em;
}

.results table th:not(:last-child),
.results table td:not(:last-child) {
    border-right: 1px solid #ccc;
}

.results table th + th,
.results table th + td,
.results table td + th,
.results table td + td {
    padding-left: 0.5em;
}

.results table th {
    text-align: left;
}

.results table .numeric {
    text-align: right;
}

.results .faux-table {
    --spinner-size: var(--output-viz-spinner-size);
    --spinner-speed: var(--output-viz-spinner-speed);
    /* 1) Margins determined for alignment of contained children with non-blocked graphs */
    margin-left: calc(95px - 0.2rem);   /* (1) */
    margin-right: calc(75px - 0.2rem);  /* (1) */
    border-collapse: collapse;
    margin-top: var(--vertical-rythm);
    margin-bottom: var(--vertical-rythm);
}

.results .faux-table .row {
    display: flex;
    margin: 0.4rem 0;
}

.results .faux-table .row > *{
    margin-left: 0.2rem;
    margin-right: 0.2rem;
    width: calc(100% / 5 - 2 * 0.2rem);
}

.results .faux-table .cell {
    width: 100%;
    border-radius: 3px;
    background-image: linear-gradient(#ececec, #f4f4f4);
    padding: 0.2em;
}

.results .faux-table .cell > * {
    visibility: hidden;
}


.results .graph {
    --spinner-size: var(--output-viz-spinner-size);
    --spinner-speed: var(--output-viz-spinner-speed);
}

.results .graph img {
    height: 576px;
}

/* KPI-blok, tabel en ATG: volle kolombreedte (zelfde als --results-viz-max-width) */
.results .results-summary-wrap .block {
    margin-left: 0;
    margin-right: 0;
}

.results .results-summary-wrap table,
.results .results-summary-wrap .faux-table {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.results .results-atg-wrap .graph img {
    width: 100%;
    height: auto;
    max-height: 576px;
    display: block;
}

/* ATG uPlot: zelfde volle breedte als vroeger IMG; vul beschikbare hoogte in .graph-atg-uplot */
.results .results-atg-wrap .graph.graph-atg-uplot {
    min-height: 22rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
}
.results .results-atg-wrap .graph.graph-atg-uplot .atg-uplot-mount {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 18rem;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.results .results-atg-wrap .graph.graph-atg-uplot .atg-uplot-shell {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.results .results-atg-wrap .graph.graph-atg-uplot .atg-uplot-root {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    width: 100%;
}
.results .results-atg-wrap .graph.graph-atg-uplot .atg-caption-overlay {
    position: absolute;
    z-index: 3;
    font-size: 0.68rem;
    line-height: 1.3;
    color: #9a9a9a;
    text-align: left;
    pointer-events: none;
}

.results .with-spinner {
    position: relative;
}

.results.in-progress .with-spinner::before {
    content: '';
    display: inline-block;
    position: absolute;
    left: calc(50% - var(--spinner-size) / 2);
    top: calc(50% - var(--spinner-size) / 2 - 2px);
    width: var(--spinner-size);
    height: var(--spinner-size);
    border-radius: var(--spinner-size);
    border: 2px solid var(--orange);
    border-right-color: transparent;
    border-left-color: transparent;
    animation: progress-spinner var(--spinner-speed) linear infinite;
}

@keyframes progress-spinner {
    to {
        transform: rotate(360deg);
    }
}

.error {
    border: 1px solid var(--orange-dark);
    padding: 1rem;
    border-radius: .25rem;
}

.error > * + * {
    margin-top: var(--vertical-rythm);
}

.error .body {
    font-family: monospace;
    white-space: pre-wrap;
    border-radius: 3px;
    background-color: #f0f0f0;
    padding: 0.5rem;
}



/*
** Form elements
*/


/*
** Normalization
**
** Normalization rules adopted from `normalize.css`, version 8.0.0; may contain
** modifications.
*/

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 * 3. Override browser's default minimum width.
 */

main button,
main input,
main optgroup,
main select {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
  min-width: 0; /* 3 */
}

/**
 * Remove background shadow on Safari.
 */

main input,
main select {
    background-repeat: no-repeat;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

main button,
main select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

main button,
main [type="button"],
main [type="reset"],
main [type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

main button::-moz-focus-inner,
main [type="button"]::-moz-focus-inner,
main [type="reset"]::-moz-focus-inner,
main [type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

main button:-moz-focusring,
main [type="button"]:-moz-focusring,
main [type="reset"]:-moz-focusring,
main [type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

main [type="checkbox"],
main [type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

main [type="number"]::-webkit-inner-spin-button,
main [type="number"]::-webkit-outer-spin-button {
  height: auto;
}


/* General input element styling */

main input, main select, main button {
    background-color: white;
    color: #222;
    border: 1px solid #ccc;

    border-radius: .25rem;
    padding: 0.25rem;
}

main input:focus, main select:focus, main button:focus {
    outline: 0;
    background-color: white;
    color: #222;
    border-color: #ee7601;
    box-shadow: 0 0 0 .2rem hsl(29.6, 99.2%, 72.9%);
}

main input:disabled, main select:disabled, main button:disabled {
    background-color: #eee;
    color: #888;
    border-color: #ccc;
    cursor: default;
}


main select {
    -webkit-appearance: none;
    appearance: none;

    padding-right: 1rem;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 1.5'%3E%3Cpath fill='%23343a40' d='M 2 2 L 0 0 h 4 z'/%3E%3C/svg%3E");
    background-position: right .35rem center;
    background-repeat: no-repeat;
    background-size: 0.65rem 0.65rem;
}

main select:disabled {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 1.5'%3E%3Cpath fill='%23959595' d='M 2 2 L 0 0 h 4 z'/%3E%3C/svg%3E");
}

/* Context-aware fixes for <input type="number"> elements. */

/* Disable spinners on Safari/Chrome */
main input[type="number"]::-webkit-inner-spin-button,
main input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Disable spinners */
main input[type="number"] {
    -webkit-appearance: textfield;
    appearance: textfield;
}


/* Button styling rules for both <button> and <a> elements. */

main button {
    text-align: center;
    background-color: var(--orange);
    color: white;
    border: 1px solid transparent;
    border-radius: 3px;

    width: auto;
    flex-shrink: 0;

    cursor: pointer;
}

main button:focus:not(:disabled),
main button:hover:not(:disabled) {
    outline: 0;
    background-color: var(--orange);
}

main button:focus:not(:disabled) {
    outline: 0;
    box-shadow: 0 0 0 0.2rem hsl(29.6, 99.2%, 72.9%);
    color: white;
}

main button:active:not(:disabled) {
    background-color: var(--orange-dark);
    color: white;
}

main button:disabled {
    border-color: transparent;
}


main button.in-progress::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 1rem;
    height: 1rem;
    margin-top: -0.2rem;
    margin-right: 0.25rem;
    border-radius: 2rem;
    border: 2px solid var(--orange);
    border-right-color: transparent;
    border-left-color: transparent;
    animation: button-progress-spinner .8s linear infinite;
}

@keyframes button-progress-spinner {
    to {
        transform: rotate(360deg);
    }
}



/* Checkbox styling */

main label.checkbox-visual input[type="checkbox"] {
    position: absolute !important;
    opacity: 0;
    z-index: -1;
}

main label.checkbox-visual input[type="checkbox"] + .box {
    display: inline-block;
    border: 1px solid #ccc;
    padding: 0.25rem;
    border-radius: .25rem;
    cursor: pointer;
    user-select: none;
}

main label.checkbox-visual input[type="checkbox"] + .box > * {
    display: inline-block;
    color: #222;
    background-color: #ddd;
    border-radius: .15rem;
    padding: 0.1rem 0.5rem;
}

main label.checkbox-visual input[type="checkbox"]:focus + .box {
    outline: 0;
    background-color: white;
    color: #222;
    border-color: #ee7601;
    box-shadow: 0 0 0 .2rem hsl(29.6, 99.2%, 72.9%);
}

main label.checkbox-visual input[type="checkbox"]:not(:checked) + .box .unchecked {
    color-adjust: exact;
    background-color: #666;
    color: white;
}

main label.checkbox-visual input[type="checkbox"]:checked + .box .checked {
    color-adjust: exact;
    background-color: var(--orange);
    color: white;
}

main label.checkbox-visual input[type="checkbox"]:disabled + .box {
    color-adjust: exact;
    cursor: default;
    background-color: #eee;
    border: 1px solid #ddd;
}

main label.checkbox-visual input[type="checkbox"]:disabled + .box > * {
    color-adjust: exact;
    background-color: #ddd;
    color: #888;
}


.popup {
    position: absolute;
    margin: auto;
    left: 0;
    right:0;
    top:6rem;
    z-index: 1;
    width: 80%;
    min-height: 400px;
    background-color: #ccc;
    border-radius: 6px;
    padding: 1rem;

}

.popup p {
    margin-top:0.5rem;
    margin-bottom:0.5rem;
}

.popup textarea {
    width:100%;
    height:15rem;
}

.popup .close-popup {
    float:right;
    cursor:pointer;
    padding-right:0.5rem;
}

.popup button {
    margin-top:1rem;
    float:right;
    margin-left:0.5rem;
}

.control button {
    width:12rem;
    margin-bottom:0.25rem;
}


/* Dynamic Graph */

.graph-controls {
    width: 100%;
    max-width: var(--results-viz-max-width);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
}

.graph-controls h4 {
    margin-top: 0.5rem;
}

/* Gecategoriseerde grafieklegenda (zelfde opbouw/kleuren als Tekentool) */
.datapoints-categories {
    margin-bottom: 0.75rem;
}
.datapoints-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
}
.datapoints-row:last-child {
    margin-bottom: 0;
}
.datapoints-category-label {
    font-weight: 600;
    margin-right: 0.25rem;
    min-width: 7.5rem;
    flex-shrink: 0;
    padding-top: 0.15rem;
}
.datapoints-blocks {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
}
.datapoints-block {
    display: block;
    width: 100%;
}
.datapoints-block-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8a8a8a;
    margin-bottom: 0.2rem;
}
.datapoints--inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.65rem;
    margin-bottom: 0;
}

.datapoints {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    row-gap: 0.45rem;
    column-gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.datapoints .datapoint .series-legend-marker {
    flex-shrink: 0;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    background-color: #888;
}

/* Kleuren gelijk aan GRAPH_SERIES_COLORS in api.js / Tekentool */
.datapoints .datapoint-binnentemperatuur .series-legend-marker { background-color: #1565c0; }
.datapoints .datapoint-setpoint-verwarmen .series-legend-marker { background-color: #e53935; }
.datapoints .datapoint-setpoint-koelen .series-legend-marker { background-color: #42a5f5; }
.datapoints .datapoint-operatieve-temperatuur .series-legend-marker { background-color: #5c6bc0; }
.datapoints .datapoint-pcm-temperatuur .series-legend-marker { background-color: #3949ab; }
.datapoints .datapoint-temperatuur-binnenwand-gem .series-legend-marker { background-color: #6d4c41; }
.datapoints .datapoint-vloer-oppervlaktetemperatuur .series-legend-marker { background-color: #a1887f; }
.datapoints .datapoint-temperatuur-dak .series-legend-marker { background-color: #78909c; }
.datapoints .datapoint-dauwpunt-binnen .series-legend-marker { background-color: #00838f; }
.datapoints .datapoint-t-toevoer-verwarming .series-legend-marker { background-color: #d84315; }
.datapoints .datapoint-buitentemperatuur .series-legend-marker { background-color: #ef6c00; }
.datapoints .datapoint-grondtemperatuur .series-legend-marker { background-color: #8d6e63; }
.datapoints .datapoint-windsnelheid .series-legend-marker { background-color: #546e7a; }
.datapoints .datapoint-luchtvochtigheid-buiten .series-legend-marker { background-color: #a1887f; }
.datapoints .datapoint-zoninstraling .series-legend-marker { background-color: #fbc02d; }
.datapoints .datapoint-pv-opbrengst .series-legend-marker { background-color: #2e7d32; }
.datapoints .datapoint-energievraag .series-legend-marker { background-color: #f9a825; }
.datapoints .datapoint-internewarmte .series-legend-marker { background-color: #ff7043; }
.datapoints .datapoint-ventilatie-energie .series-legend-marker { background-color: #ffb300; }
.datapoints .datapoint-cop-verwarmen .series-legend-marker { background-color: #616161; }
.datapoints .datapoint-cop-koelen .series-legend-marker { background-color: #9575cd; }
.datapoints .datapoint-ventilatiedebiet .series-legend-marker { background-color: #7e57c2; }
.datapoints .datapoint-luchtinfiltratie .series-legend-marker { background-color: #ab47bc; }
.datapoints .datapoint-ventilatie-open-ramen .series-legend-marker { background-color: #ba68c8; }
.datapoints .datapoint-toevoer-lucht-temp .series-legend-marker { background-color: #ec407a; }
.datapoints .datapoint-vent-t-inblaas .series-legend-marker { background-color: #d81b60; }
.datapoints .datapoint-vent-t-na-wtw .series-legend-marker { background-color: #ad1457; }
.datapoints .datapoint-vent-t-retour .series-legend-marker { background-color: #880e4f; }
.datapoints .datapoint-koelenergie-ontvochtiging .series-legend-marker { background-color: #1565c0; }
.datapoints .datapoint-ontvochtiging-lh .series-legend-marker { background-color: #42a5f5; }
.datapoints .datapoint-temperatuur-aanzuigpunt .series-legend-marker { background-color: #f06292; }
.datapoints .datapoint-wtw-rendement .series-legend-marker { background-color: #5e35b1; }
.datapoints .datapoint-luchtvochtigheid .series-legend-marker,
.datapoints .datapoint-luchtvochtigheid-binnen .series-legend-marker { background-color: #29b6f6; }
.datapoints .datapoint-vochtproductie-intern .series-legend-marker { background-color: #26a69a; }
.datapoints .datapoint-co2-binnen .series-legend-marker { background-color: #43a047; }
.datapoints .datapoint-stand-ramen-open .series-legend-marker { background-color: #9c27b0; }
.datapoints .datapoint-zomernachtventilatie-actief .series-legend-marker { background-color: #ce93d8; }
.datapoints .datapoint-pv-zelfverbruik .series-legend-marker { background-color: #66bb6a; }
.datapoints .datapoint-netbelasting-kva .series-legend-marker { background-color: #6a1b9a; }
.datapoints .datapoint-elektrisch-ev .series-legend-marker { background-color: #ad1457; }
.datapoints .datapoint-huishoudelijk-elektrisch .series-legend-marker { background-color: #f4511e; }
.datapoints .datapoint-tapwater-elektrisch .series-legend-marker { background-color: #00897b; }
.datapoints .datapoint-batterij-soc .series-legend-marker { background-color: #00838f; }
.datapoints .datapoint-batterij-laden .series-legend-marker { background-color: #00acc1; }
.datapoints .datapoint-batterij-ontladen .series-legend-marker { background-color: #ec407a; }

.datapoints .datapoint-binnentemperatuur-2 .series-legend-marker { background-color: #0041C2; }
.datapoints .datapoint-buitentemperatuur-2 .series-legend-marker { background-color: #e65100; }
.datapoints .datapoint-pcm-temperatuur-2 .series-legend-marker { background-color: #52D017; }
.datapoints .datapoint-energievraag-2 .series-legend-marker { background-color: #8c564b; }
.datapoints .datapoint-ventilatiedebiet-2 .series-legend-marker { background-color: #B048B5; }
.datapoints .datapoint-internewarmte-2 .series-legend-marker { background-color: #DE3163; }

.series-legend-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    cursor: pointer;
    user-select: none;
    max-width: 100%;
}

.series-legend-toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.series-legend-toggle-input:not(:checked) + .series-legend-marker {
    opacity: 0.42;
}

.series-legend-toggle-input:disabled + .series-legend-marker {
    opacity: 0.45;
}

.series-legend-toggle-input:not(:checked) + .series-legend-marker + .series-legend-label,
.series-legend-toggle-input:not(:checked) ~ .series-legend-label {
    opacity: 0.75;
}

.series-legend-toggle-input:focus-visible + .series-legend-marker {
    outline: 2px solid #ee7601;
    outline-offset: 2px;
}

.series-legend-label {
    line-height: 1.2;
}

.control.control--series-legend {
    margin-bottom: 0;
}

.graph-controls .datapoints .datapoint .control:not(.control--series-legend) label {
    margin-bottom: 0.25rem;
}

.graph-controls .bereik {
    display: grid;
    grid-template-columns: 33% 33% 33%;
    grid-template-rows: auto;
    margin-bottom: 1rem;
}

.graph-controls .bereik .day-select {
    width: 3rem;
    text-align: center;
}

.graph-controls .bereik .month-select {
    width: 8rem;
}

.graph-controls .lightheader {
    font-weight:normal;
}

.graph-controls input, .graph-controls select, .graph-controls button {
    height: 2rem;
}

.graph-controls .graph-overige {
    display: grid;
    grid-template-columns: 33% 66%;
    grid-template-rows: auto;
}

#results-graph {
    width: 100%;
    max-width: var(--results-viz-max-width);
    height: 512px;
    margin-left: auto;
    margin-right: auto;
    min-width: 0;
}

@media print {
    #results-graph {
        page-break-before: always;
        margin-top:3rem;
    }
}

#results-graph-content {
    width: 100%;
    height:100%;
}
/* uPlot vendor .uplot { width: min-content } — voorkom horizontale overflow buiten resultaatkolom */
#results-graph-content .uplot {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.results:not(.show-placeholders) #results-graph-placeholder {
    display: none;
}

.results.show-placeholders #results-graph {
    display: none;
}

#results-graph-placeholder.results-viz-column {
    height: 512px;
    box-sizing: border-box;
}

#results-graph-placeholder.results-viz-column .graph.placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#results-graph-placeholder.results-viz-column .graph.placeholder img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
}


aside#full-screen-container.hidden-visibility {
    visibility:hidden;
}

aside#full-screen-container {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color:white;
    z-index: 1;
    border-bottom: 1px solid black
}

aside .close-button {
    position:absolute;
    right:2rem;
    top:5rem;
    font-size:6rem;
    cursor: pointer;
    z-index: 1;
}

#full-screen-graph-holder {
    width: calc(100% - 4rem);
    height: calc(100% - 8rem);
    margin: 6rem 2rem 2rem 2rem;
}