@media (prefers-reduced-motion: reduce) {
    .app-columns .panel-left,
    .app-columns .panel-right {
        transition: none !important;
    }
    .sidebar-panel-toggle {
        transition: none !important;
    }
}

@media print {
    body.showing-graphs {
        height: auto !important;
        overflow: visible !important;
    }

    .fullscreen-toggle {
        display: none !important;
    }

    .content .graph img, #results-graph {
        page-break-before: always;
    }

    .energy-sankey-block {
        page-break-inside: avoid;
    }

    .energy-sankey-plot {
        min-height: 196px;
        height: auto;
    }

    .app-columns,
    main > .content {
        overflow: visible !important;
        overflow-y: visible !important;
    }
}

:root {
    --vertical-rhythm: 0.5rem;
    --spacing: 0.5rem;
    /* Outputbalk: zelfde plot-hoogte als Sankey (Plotly height 364px) */
    --output-viz-plot-height: 364px;
    /* Eén formaat voor alle laadspinners bij grafieken / grote uitvoervakken */
    --output-viz-spinner-size: 4rem;
    --output-viz-spinner-speed: 1.1s;

    --font-stack: "Open Sans", sans-serif;

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

    --tool-spacing: 0.5rem;
    /* Sidebar: smaller share on wide screens so canvas gets more space (10% wider) */
    --sidebar-width: min(24.2rem, max(17.6rem, 19.8vw));
    --header-height: 3.5rem;
}


* {
	box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-family: var(--font-stack);
    color: #222;
    height: 100%;
    overflow: hidden;
}

#toevoertemperatuur-verwarmen-bij-0C::placeholder {
    color: #b8b8b8;
    opacity: 1;
}

/* Optionele gebouwvelden: standaardwaarde als lichtgrijze placeholder */
#gevel-vloer-koppel-psi::placeholder,
#gevel-zon-absorptie::placeholder,
#buur-verwarmd-temperatuur::placeholder,
#isso51-ontwerp-buitentemperatuur-override::placeholder,
#rc-tussenvloer::placeholder {
    color: #b8b8b8;
    opacity: 1;
}

body {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

h1, h2, h3 {
    font-weight: normal;
}

h1[data-command], h2[data-command], h3[data-command] {
    cursor: pointer;
}

h1 {
    font-size: 200%;
}

h2 {
    font-size: 150%;
}

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

details > summary {
    cursor: pointer;
    user-select: none;
}

.hidden {
    display: none !important;
}


/*
** Generic layout styles
*/

/* Side-by-side styling of multiple elements */
.side-by-side {
    display: flex;
    align-items: center;
    margin: 0 -0.1rem;
}

.side-by-side > * {
    margin: 0 0.1rem;
}

.side-by-side > span {
    white-space: nowrap;
}

/* Gebruikte waarden bij optionele velden (na berekening) op eigen regel */
.used-value {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.8rem;
    color: #888;
}

/*
** Main page layout: three resizable columns (20% / 50% / 30% default)
*/

main {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--header-height));
    min-height: 0;
    margin-top: var(--header-height);
}

.app-columns {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    padding-top: 0.5rem;
    --panel-left-pct: 20;
    --panel-center-pct: 50;
    --panel-right-pct: 30;
    --sidebar-rail-width: 2.75rem;
}

/* Ingeklapt: smalle rail met alleen het paneel-icoon (icoon blijft bereikbaar) */
.app-columns.panel-left-collapsed .panel-left {
    flex: 0 0 var(--sidebar-rail-width) !important;
    min-width: var(--sidebar-rail-width) !important;
    max-width: var(--sidebar-rail-width) !important;
    padding: 0.35rem 0.2rem;
    opacity: 1;
    overflow: hidden;
    border-right-width: 2px;
    pointer-events: auto;
    align-items: stretch;
}

.app-columns.panel-left-collapsed .panel-left .sidebar-panel-collapse-target {
    display: none !important;
}

.app-columns.panel-left-collapsed .panel-left .sidebar-panel-topbar--input {
    justify-content: center;
    padding: 0.35rem 0.1rem;
    border-bottom: none;
    flex: 1 1 auto;
}

.app-columns.panel-left-collapsed .resizer[data-resizer="left"] {
    display: none;
}

.app-columns.panel-left-collapsed .panel-center,
.app-columns.panel-right-collapsed .panel-center {
    flex: 1 1 auto;
}

.app-columns.panel-right-collapsed {
    --panel-right-pct: 0;
}

.app-columns .panel-left {
    flex: 0 0 calc(var(--panel-left-pct) * 1%);
    min-width: 14rem;
    max-width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    border-right: 2px solid #ccc;
    background-color: #eee;
    padding: 0.35rem 0.5rem 0.5rem;
    transition:
        flex-basis 0.38s cubic-bezier(0.4, 0, 0.2, 1),
        min-width 0.38s cubic-bezier(0.4, 0, 0.2, 1),
        max-width 0.38s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.32s ease,
        border-right-width 0.28s ease;
}

.sidebar-panel-topbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 0 0.35rem 0;
    border-bottom: 1px solid #ccc;
}

.sidebar-panel-topbar--input {
    justify-content: space-between;
    gap: 0.35rem;
}

.sidebar-panel-topbar--input .project-share-button {
    flex-shrink: 0;
    font-size: 0.82rem;
    padding: 0.28rem 0.55rem;
    border: 1px solid #bbb;
    border-radius: 4px;
    background: #e8e8e8;
    color: #333;
    cursor: pointer;
    line-height: 1.2;
}

.sidebar-panel-topbar--input .project-share-button:hover {
    background: #ddd;
}

.sidebar-panel-topbar--input .project-share-button:disabled {
    opacity: 0.65;
    cursor: default;
}

.app-columns.panel-left-collapsed .panel-left .sidebar-panel-topbar--input .project-share-button {
    display: none;
}

.sidebar-panel-topbar--output {
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    border-bottom: 1px solid #e0e0e0;
    padding: 0.25rem 0.45rem 0.35rem;
    background: #fafafa;
}

.sidebar-panel-collapse-target {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-panel-collapse-target > div:first-child {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.sidebar-panel-collapse-target .sidebar-footer {
    flex-shrink: 0;
    margin-top: auto;
}

.sidebar-output-collapse-target {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.app-columns .resizer {
    flex: 0 0 6px;
    min-width: 6px;
    cursor: col-resize;
    background: #ccc;
}

.app-columns .resizer:hover {
    background: var(--orange);
}

.app-columns .panel-center {
    flex: 0 0 calc(var(--panel-center-pct) * 1%);
    min-width: 200px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.app-columns .panel-right {
    flex: 0 0 calc(var(--panel-right-pct) * 1%);
    min-width: 240px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fafafa;
    border-left: 2px solid #ccc;
    transition:
        flex-basis 0.38s cubic-bezier(0.4, 0, 0.2, 1),
        min-width 0.38s cubic-bezier(0.4, 0, 0.2, 1),
        max-width 0.38s cubic-bezier(0.4, 0, 0.2, 1),
        border-left-width 0.28s ease;
}

.app-columns.panel-right-collapsed .panel-right {
    flex: 0 0 var(--sidebar-rail-width) !important;
    min-width: var(--sidebar-rail-width) !important;
    max-width: var(--sidebar-rail-width) !important;
    overflow: hidden;
    border-left: 2px solid #ccc;
    opacity: 1;
    pointer-events: auto;
    padding: 0;
}

.app-columns.panel-right-collapsed .panel-right .sidebar-output-collapse-target {
    display: none !important;
}

.app-columns.panel-right-collapsed .panel-right .sidebar-panel-topbar--output {
    justify-content: center;
    padding: 0.35rem 0.1rem;
    border-bottom: none;
    flex: 1 1 auto;
    background: #f0f0f0;
}

.app-columns.panel-right-collapsed .panel-right .output-toolbar--with-panel-toggle {
    display: none !important;
}

.output-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-end;
    align-items: center;
    padding: 0.2rem 0.5rem 0.35rem;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
    background: #fafafa;
}

/* Zelfde regel als paneel-toggle: geen dubbele rand; vult resterende breedte */
.sidebar-panel-topbar--output .output-toolbar--with-panel-toggle {
    flex: 1 1 auto;
    min-width: min(12rem, 100%);
    border: none;
    padding: 0 0 0 0.15rem;
    margin: 0;
    background: transparent;
}

.output-toolbar--results {
    justify-content: flex-start;
    border-top: none;
    border-bottom: 1px solid #e0e0e0;
    margin-top: 0;
    margin-bottom: 0.35rem;
    padding: 0.35rem 0.5rem 0.5rem;
}

.output-toolbar--results .button {
    flex: 0 1 auto;
}

.app-columns.panel-right-collapsed .resizer[data-resizer="right"] {
    display: none;
}

.sidebar .building-summary,
.app-columns .panel-left .building-summary {
    max-width: 100%;
}

.building-summary .project-name-display {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
    padding: 0.35rem 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color 0.15s, background 0.15s;
}

.building-summary .project-name-display:hover {
    text-decoration-color: var(--orange);
    background: rgba(0, 0, 0, 0.04);
}

.building-summary .project-name-display:focus {
    outline: none;
    text-decoration-color: var(--orange);
    background: rgba(0, 0, 0, 0.06);
}

.building-summary .building-summary-meta {
    display: block;
    font-size: 0.9em;
    color: #666;
}

/* Popup om projectnaam in te geven */
.project-name-popup {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    width: 90%;
    max-width: 22rem;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.project-name-popup.hidden {
    display: none !important;
}

.project-name-popup h2 {
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.project-name-popup .close-popup {
    float: right;
    cursor: pointer;
    padding: 0 0.25rem;
    font-size: 1.2em;
}

.project-name-popup label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.35rem;
}

.project-name-popup #project-name-edit {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem;
    margin-bottom: 1rem;
}

.project-name-popup .popup-buttons {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.project-name-popup .popup-buttons button {
    padding: 0.4rem 0.75rem;
}

.sidebar-footer {
    flex-shrink: 0;
    margin-top: auto;
}
.sidebar-documentatie-link {
    display: block;
    margin: 0 0 0.35rem 0;
    padding: 0;
    font-size: 0.95em;
    color: var(--link-color, #0a5a9e);
    text-decoration: none;
}

.building-configuration .building-configuration-documentatie {
    margin-top: calc(var(--vertical-rhythm) * 1.5);
    margin-bottom: 0.75rem;
    padding: 0 0.15rem;
}
.sidebar-documentatie-link:hover {
    text-decoration: underline;
}
.sidebar-version-block {
    margin-top: 0.5rem;
    padding: 0 0.15rem;
    font-size: 0.9em;
    line-height: 1.4;
}
.sidebar-app-version {
    display: block;
    color: #555;
    font-weight: 600;
}
.sidebar-changelog-link {
    display: inline-block;
    margin-top: 0.15rem;
    color: var(--link-color, #0a5a9e);
    text-decoration: none;
}
.sidebar-changelog-link:hover {
    text-decoration: underline;
}
.changelog-page .changelog-content {
    max-width: 960px;
    margin: 1.5rem auto 2rem;
    padding: 0 1rem;
}
.changelog-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}
.changelog-table th,
.changelog-table td {
    border-bottom: 1px solid #e0e0e0;
    padding: 0.5rem 0.65rem;
    vertical-align: top;
    text-align: left;
}
.changelog-table thead th {
    background: #fffdf5;
    border-bottom: 1px solid #d6c68b;
}
.changelog-translation-pending {
    color: #777264;
    font-size: 0.85em;
}
.changelog-commit-hash {
    color: #777264;
    font-size: 0.85em;
    margin-left: 0.5rem;
}
.sidebar-branding {
    display: flex;
    align-items: center;
    padding-bottom: var(--vertical-rhythm);
}

.sidebar-branding .logo {
    max-height: 3.5rem;
}

.sidebar-branding .name {
    margin-left: 0.2em;
    font-weight: bold;
}


/*
** Viewport & related tools (and status display) styling
*/

.app-columns .panel-center > .viewport,
main > .content > .viewport {
    flex: 1 1 auto;
    min-height: 0;
}
.viewport {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 280px;
    /* Ruimte voor verticale toolbar rechts (knoppen + marge); voorkomt overlap met panelen */
    --viewport-toolbar-gutter: 5.5rem;
}

.viewport canvas {
    display: block;
    height: 100%;
    width: 100%;
}

.viewport .tekentool-pointer-status {
    position: absolute;
    left: 0.5rem;
    right: var(--viewport-toolbar-gutter);
    bottom: 0.35rem;
    max-width: 42rem;
    font-size: 0.75rem;
    line-height: 1.35;
    color: #222;
    background: rgba(255, 248, 220, 0.96);
    border: 1px solid #c9b87a;
    border-radius: 3px;
    padding: 0.25rem 0.5rem;
    z-index: 6;
    pointer-events: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.viewport .tekentool-pointer-status:empty {
    display: none;
}

/* Verdieping-tabs + import + legenda: één kolom, geen vaste top op legenda (was overlap met tweede rij) */
.viewport .viewport-floor-legend-stack {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    margin: 0.25rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    max-width: min(40rem, calc(100% - var(--viewport-toolbar-gutter) - 0.75rem));
    box-sizing: border-box;
}
.viewport .floor-list {
    position: relative;
    top: auto;
    left: auto;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #ccc;
    border-radius: 4px;
    margin: 0;
    z-index: 1;
    flex-shrink: 0;
}
.viewport .floor-list--stacked {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
}
.viewport .floor-import-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    font-size: 0.78rem;
    max-width: min(36rem, calc(100vw - 2rem));
}
.viewport .floor-import-btn {
    font-size: inherit;
    padding: 0.15rem 0.35rem;
}
.viewport .floor-underlay-opacity-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.viewport .floor-underlay-opacity-wrap input[type="range"] {
    width: 6rem;
    vertical-align: middle;
}
.viewport .floor-tabs-wrap {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-width: 0;
}
.viewport .floor-tab-add {
    flex-shrink: 0;
    width: 2rem;
    min-width: 2rem;
    padding: 0;
    font-size: 1.25rem;
    line-height: 1;
    font-weight: bold;
    color: #666;
    background: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.viewport .floor-tab-add:hover {
    background: #e0e0e0;
    color: #333;
}
.viewport .floor-tab-add:first-of-type {
    border-radius: 4px 0 0 4px;
    border-right-width: 0;
}
.viewport .floor-tab-add:last-of-type {
    border-radius: 0 4px 4px 0;
    border-left-width: 0;
}
.viewport .floor-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
    min-width: 0;
    border: 1px solid #ccc;
    border-left: none;
    border-right: none;
    background: #f5f5f5;
}
.viewport .floor-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
    cursor: pointer;
    border: none;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: #333;
    border-radius: 0;
}
.viewport .floor-tab:hover {
    background: #eee;
}
.viewport .floor-tab.active {
    background: #fff;
    border-bottom-color: var(--orange);
    color: #222;
    font-weight: 500;
}
.viewport .floor-tab-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 8rem;
}
.viewport .floor-tab-remove {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: none;
    border-radius: 2px;
    background: transparent;
    color: #999;
    cursor: pointer;
}
.viewport .floor-tab-remove:hover:not(:disabled) {
    background: rgba(204, 0, 0, 0.12);
    color: #c00;
}
.viewport .floor-tab-remove:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.viewport .floor-tab.active .floor-tab-remove {
    color: #666;
}
.viewport .floor-tab.active .floor-tab-remove:hover:not(:disabled) {
    background: rgba(204, 0, 0, 0.12);
    color: #c00;
}

/* Legenda: direct onder floor-list in .viewport-floor-legend-stack (geen absolute top) */
.viewport .wall-boundary-legend-bar {
    position: relative;
    top: auto;
    left: auto;
    z-index: 1;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    gap: 0.35rem 1rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.72rem;
    line-height: 1.3;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #ccc;
    border-radius: 4px;
    max-width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
}
.viewport .wall-boundary-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}
.viewport .wall-boundary-legend__swatch {
    flex-shrink: 0;
    width: 0.7rem;
    height: 0.5rem;
    border: 1px solid #888;
    border-radius: 1px;
}
.viewport .wall-boundary-legend__swatch--outdoor {
    background: hsl(210, 55%, 82%);
}
.viewport .wall-boundary-legend__swatch--unheated {
    background: hsl(28, 70%, 78%);
}
.viewport .wall-boundary-legend__swatch--heated {
    background: hsl(130, 35%, 76%);
}

.viewport .floor-viewport-controls {
    position: absolute;
    top: 0;
    right: var(--viewport-toolbar-gutter);
    z-index: 5;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    row-gap: 0.35rem;
    max-width: calc(100% - var(--viewport-toolbar-gutter) - 0.5rem);
    box-sizing: border-box;
}
/* Verdiepingsparams + glas als één kolom: geen flex-wrap-rij ertussen, strak onder elkaar */
.viewport .floor-params-glass-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
    flex: 0 1 16rem;
    max-width: 16rem;
    min-width: 0;
}
.viewport .floor-params-glass-stack > .floor-params-block,
.viewport .floor-params-glass-stack > .floor-glass-block {
    flex: 0 0 auto;
    max-width: none;
    width: 100%;
    box-sizing: border-box;
}
.viewport .floor-dak-block {
    flex: 0 1 16rem;
    max-width: 16rem;
    min-width: 0;
    background: rgba(255, 255, 255, 0.86);
    padding: 0.5rem 0.6rem 0.6rem;
    border-radius: 4px;
    border: 1px solid #ccc;
}
.viewport .floor-viewport-panel {
    margin: 0;
}
.viewport .floor-viewport-panel > summary.floor-viewport-panel__summary {
    list-style: none;
    cursor: pointer;
    margin: 0 0 0.45rem 0;
    font-size: 0.95rem;
    font-weight: 600;
    user-select: none;
}
.viewport .floor-viewport-panel > summary.floor-viewport-panel__summary::-webkit-details-marker {
    display: none;
}
.viewport .floor-viewport-panel > summary.floor-viewport-panel__summary::before {
    content: '▼';
    display: inline-block;
    margin-right: 0.35rem;
    font-size: 0.6rem;
    line-height: 1;
    vertical-align: 0.05em;
    transition: transform 0.15s ease;
}
.viewport .floor-viewport-panel:not([open]) > summary.floor-viewport-panel__summary::before {
    transform: rotate(-90deg);
}
.viewport .floor-viewport-panel:not([open]) > summary.floor-viewport-panel__summary {
    margin-bottom: 0;
}
.viewport .floor-viewport-panel__body {
    display: block;
}
.viewport .floor-dak-block .floor-dak-block-title {
    margin: 0 0 0.45rem 0;
    font-size: 0.95rem;
    font-weight: 600;
}
.viewport .floor-dak-block .floor-dakzone-subtitle {
    margin: 0 0 0.35rem 0;
    font-size: 0.85rem;
    font-weight: 600;
}
.viewport .floor-dak-block .floor-params-dak-type-wrap {
    margin-top: 0;
}
.viewport .floor-dak-block .floor-params-dakzone-wrap {
    margin-top: 0.5rem;
    padding-top: 0.45rem;
    border-top: 1px solid #ddd;
}
.viewport .floor-dak-block .floor-params-dakzone-wrap input[type="number"] {
    width: 4.5rem;
}
.viewport .floor-params-block {
    background: rgba(255, 255, 255, 0.86);
    padding: 0.5rem 0.6rem 0.6rem;
    border-radius: 4px;
    border: 1px solid #ccc;
}
.viewport .floor-params-block .floor-element-props-sub:not([hidden]) {
    display: block;
    margin-top: 0.35rem;
}
.viewport .floor-params-block .floor-element-props-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.35rem;
    margin-bottom: 0.15rem;
}
.viewport .floor-params-block .floor-element-props-checkbox-row input[type="checkbox"] {
    margin-top: 0.2rem;
    flex-shrink: 0;
}
.viewport .floor-params-block .floor-element-props-checkbox-row label {
    margin-top: 0;
    font-size: 0.85rem;
    font-weight: 500;
}
.viewport .floor-element-rotation-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.15rem;
}
.viewport .floor-element-rotation-input-group {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}
.viewport .floor-element-rotation-input-group input[type="number"] {
    width: 4rem;
    margin-right: 0;
}
.viewport .floor-element-rotation-deg-suffix {
    font-size: 0.9rem;
    color: #444;
    user-select: none;
}
.viewport .floor-element-rotation-rose {
    width: 3.25rem;
    height: 3.25rem;
    flex-shrink: 0;
    box-sizing: border-box;
    border-radius: 50%;
    transform-origin: 50% 50%;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    background: radial-gradient(circle at 50% 45%, #f5f5f5 0%, #e2e2e2 55%, #d4d4d4 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.1);
    padding: 0.2rem;
}
.viewport .floor-element-rotation-rose:active {
    cursor: grabbing;
}
.viewport .floor-element-rotation-rose svg {
    width: 100%;
    height: 100%;
    display: block;
    transform-origin: 50% 50%;
}
.viewport .floor-params-block .floor-params-transmissie {
    border-top: 1px solid #ccc;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}
.viewport .floor-params-block .floor-transmissie-block-title {
    margin: 0 0 0.35rem 0;
    font-size: 0.9rem;
    font-weight: 600;
}
.viewport .floor-params-block .floor-params-transmissie label {
    display: block;
    margin-top: 0.35rem;
    margin-bottom: 0.15rem;
    font-size: 0.85rem;
}
.viewport .floor-params-block .floor-params-transmissie label:first-of-type {
    margin-top: 0;
}
.viewport .floor-params-block input[type="checkbox"] {
    margin-right: 0.35rem;
}
.viewport .floor-viewport-controls .floor-glass-block {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
}
.viewport .floor-glass-block {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0.5rem 0.6rem 0.6rem;
    background: rgba(255, 255, 255, 0.86);
}
.viewport .floor-glass-block .floor-glass-row {
    margin-bottom: 0.5rem;
}
.viewport .floor-glass-block .floor-glass-row:last-child {
    margin-bottom: 0;
}
.viewport .floor-glass-block .floor-glass-m2 {
    margin-left: 0.35rem;
}
.viewport .floor-params-block label,
.viewport .floor-dak-block label,
.viewport .floor-glass-block label {
    display: block;
    margin-top: 0.35rem;
    margin-bottom: 0.15rem;
    font-size: 0.85rem;
    overflow-wrap: anywhere;
    hyphens: auto;
}
.viewport .floor-params-block > label:first-child,
.viewport .floor-viewport-panel__body > label:first-child,
.viewport .floor-dak-block .floor-params-dak-type-wrap > label:first-child,
.viewport .floor-glass-block label:first-child,
.viewport .floor-glass-block .floor-viewport-panel__body > .floor-glass-row:first-child label {
    margin-top: 0;
}
.viewport .floor-params-block input[type="number"],
.viewport .floor-dak-block input[type="number"],
.viewport .floor-glass-block input[type="number"] {
    width: 4rem;
    padding: 0.25rem;
    margin-right: 0.25rem;
}
.viewport .floor-params-block select,
.viewport .floor-dak-block select {
    display: block;
    width: 100%;
    max-width: 12rem;
    min-height: 1.75rem;
    padding: 0.25rem 0.35rem;
    margin-top: 0.15rem;
    margin-bottom: 0;
    font-size: 0.9rem;
    box-sizing: border-box;
}
.viewport .floor-glass-block .floor-glass-m2 {
    font-size: 0.8rem;
    color: #666;
}
.viewport .north-arrow-wrap {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    width: 10rem;
    height: 10rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    z-index: 4;
    color: #333;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
}
.viewport .north-arrow-wrap:active {
    cursor: grabbing;
}
.viewport .north-arrow-wrap .north-arrow {
    width: 6.25rem;
    height: 6.25rem;
    display: block;
}
.viewport .north-arrow-wrap .north-arrow-label {
    /* Verborgen: N staat in de SVG-compassroos */
    display: none;
}
/* Zijbalk in/uit: knop in paneelbalk, zelfde rechthoekige stijl als .fullscreen-toggle */
.sidebar-panel-toggle {
    position: static;
    z-index: 1;
    padding: 0.42rem 0.38rem;
    margin: 0;
    line-height: 1;
    font-size: 0;
    color: #444;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.sidebar-panel-toggle:hover {
    background: #fff;
    border-color: #b0b0b0;
}

.sidebar-panel-toggle:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}

.sidebar-panel-toggle__icon {
    width: 1.65rem;
    height: 1.65rem;
    display: block;
    flex-shrink: 0;
}

.sidebar-panel-toggle[aria-expanded="true"] {
    border-color: rgba(238, 118, 1, 0.55);
    box-shadow: 0 0 0 1px rgba(238, 118, 1, 0.25);
}

.sidebar-panel-toggle[aria-expanded="false"] {
    color: #333;
    background: #f3f4f6;
    border-color: #c5cad3;
}

.app-columns.panel-left-collapsed .sidebar-panel-toggle--input[aria-expanded="false"],
.app-columns.panel-right-collapsed .sidebar-panel-toggle--output[aria-expanded="false"] {
    background: #fff;
}

.viewport .control-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    width: var(--viewport-toolbar-gutter);
    max-width: var(--viewport-toolbar-gutter);
    box-sizing: border-box;
    padding: calc(var(--tool-spacing) / 2) 0.2rem;
    z-index: 6;
}

.viewport .control-box button.tool {
    margin: calc(var(--tool-spacing) / 2);
    width: 2.5rem;
    height: 2.5rem;
}


.tool-selector {
    position: relative;
}

button.tool.tool--active {
    border: 2px solid var(--orange);
}


.tool-selector .popup {
    position: absolute;
    pointer-events: none;
    top: 0.25rem;
    right: 3.25rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    background: white;
    box-shadow: 2px 5px 10px #aaa;
    white-space: nowrap;
    visibility: hidden;
}

.tool-selector button:hover + .popup {
    visibility: visible;
}

.tool-selector .popup::after {
    content: "";
    display: block;
    position: absolute;

    left: 100%;
    margin-left: -2px;
    top: 50%;
    transform: translateY(-50%);

    border: 8px solid white;
    border-color: transparent transparent transparent white;
}


/*
** Sidebar content
*/

/* Berekeningsoverzicht */

main .sidebar .calculation-results,
.calculation-results--in-right-panel {
    margin-top: calc(2 * var(--vertical-rhythm));
}

.panel-right > .calculation-results--in-right-panel,
.sidebar-output-collapse-target > .calculation-results--in-right-panel {
    margin-top: 0;
    padding: 1rem 1rem 0.5rem;
    border-bottom: 1px solid #ddd;
}

/* Zijbalk + uPlot: nakomelingen min-width 0; calculation-results níet shrinken onder eigen inhoud
   (anders overlapt jaargrafiek tabel/Sankey en ATG door overflow: visible). */
.app-columns .panel-right .calculation-results--in-right-panel {
    flex: 0 0 auto;
    flex-shrink: 0;
    flex-grow: 0;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
.app-columns .panel-right #panel-calculation-details.calculation-details {
    flex: 1 1 auto;
    flex-grow: 1;
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.app-columns .panel-right .calculation-details > .fullscreen-container.results-graph-fullscreen-wrapper,
.app-columns .panel-right .calculation-details > .fullscreen-container.graph-fullscreen-wrapper,
.app-columns .panel-right .calculation-details > #atg-graph-fullscreen-container,
.app-columns .panel-right .calculation-details > .atg-fullscreen-wrapper {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
/* Jaargrafiekblok mag niet krimpen onder vaste plot-hoogte → overlay op tabel/ATG bij flex-shrink */
.app-columns .panel-right .calculation-details > .fullscreen-container.results-graph-fullscreen-wrapper:not(.fullscreen-in-window) {
    flex-shrink: 0;
}
.app-columns .panel-right #calculation-detail-container {
    max-width: 100%;
    box-sizing: border-box;
}
.app-columns .panel-right .results-graph-wrapper {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.app-columns .panel-right .results-graph {
    min-width: 0;
    max-width: 100%;
}
.app-columns .panel-right #results-graph {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
.app-columns .panel-right #results-graph-content {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    /* uPlot tekent Y-labels/ticks binnen canvas; overflow:hidden knipt bij smalle flexkolom */
    overflow-x: visible;
    overflow-y: hidden;
}
.app-columns .panel-right .atg-fullscreen-wrapper .graph {
    min-width: 0;
    max-width: 100%;
}
.app-columns .panel-right .atg-uplot-root {
    max-width: 100%;
    overflow: hidden;
}
.app-columns .panel-right #calculation-detail-container .belastingduurkromme-stack {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.app-columns .panel-right #calculation-detail-container #belastingduurkromme-graph-content {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.calculation-results > * + * {
    margin-top: var(--vertical-rhythm);
}

.calculation-results .overview th {
    text-align: left;
    padding-right: 0.2rem;
}

.calculation-results .overview td.numeric {
    text-align: right;
    min-width: 2rem;
}

.calculation-results .elaboration {
    margin-top: 0;
    font-size: 75%;
    min-height: calc(1.5 * 2em);
    color: #666;
}

/* Sankey: elektrisch eindenergie (Plotly) onder de overzichtstabel */
.energy-sankey-block {
    margin-top: 0.75rem;
    /* Sankey-grafiek ~0.75× referentie (iets hoger dan 0.7 voor leesbaarheid). */
    --output-viz-plot-height: 620px;
    --energy-sankey-plot-display-height: calc(var(--output-viz-plot-height) * 0.75);
    padding-top: 0.5rem;
    padding-bottom: 0.35rem;
    border-top: 1px solid #e8e8e8;
    /* 3 kolommen + labels; extra hoogte bij grote balansstromen */
}

.results-sankey-fullscreen-wrapper {
    position: relative;
}

/* Titelrij zoals Sankey: ruimte voor absolute fullscreen-knop rechts */
.output-viz-section-title,
.energy-sankey-title {
    font-size: 0.95rem;
    font-weight: bold;
    margin: 0 2.75rem 0.35rem 0;
    padding-right: 0.25rem;
    color: #222;
}

.energy-sankey-disclaimer {
    font-size: 0.72rem;
    line-height: 1.35;
    color: #666;
    margin: 0 0 0.5rem 0;
}

.energy-sankey-plot {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: var(--energy-sankey-plot-display-height);
    height: var(--energy-sankey-plot-display-height);
    overflow: hidden;
}

.energy-sankey-plot.with-spinner {
    --spinner-size: var(--output-viz-spinner-size);
    --spinner-speed: var(--output-viz-spinner-speed);
}

.energy-sankey-plot.energy-sankey-loading {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.01));
    border-radius: 4px;
}

.energy-sankey-placeholder {
    min-height: var(--energy-sankey-plot-display-height);
    height: var(--energy-sankey-plot-display-height);
}

.energy-sankey-empty {
    font-size: 0.8rem;
    color: #888;
    margin: 1rem 0;
}

.state--error .calculation-results .elaboration {
    color: var(--orange-dark);
}

/* Expliciete melding wanneer luchtvochtigheid geschat is (geen kolom in klimaatbestand) */
.notice.notice--humidity-estimate {
    display: block;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    color: #5a4a32;
    background: #f5f0e6;
    border-left: 3px solid #c4a747;
    border-radius: 0 2px 2px 0;
}

/* Melding wanneer CO2-berekening ontbreekt of is mislukt */
.notice.notice--co2-warning {
    display: block;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    color: #5a4a32;
    background: #f5f0e6;
    border-left: 3px solid #c4a747;
    border-radius: 0 2px 2px 0;
}

/* Melding wanneer WTW Bypass-data ontbreekt in resultaten (legacy) */
.notice.notice--wtw-bypass-warning {
    display: block;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    color: #5a4a32;
    background: #f5f0e6;
    border-left: 3px solid #c4a747;
    border-radius: 0 2px 2px 0;
}

/* Melding wanneer WTW rendement-data ontbreekt in resultaten */
.notice.notice--wtw-rendement-warning {
    display: block;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    color: #5a4a32;
    background: #f5f0e6;
    border-left: 3px solid #c4a747;
    border-radius: 0 2px 2px 0;
}

.state--outdated .calculation-results .overview,
.state--in-progress .calculation-results .overview,
.state--error .calculation-results .overview {
    color: #888;
}

.state--in-progress .calculation-results button.with-spinner::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);
    }
}


/* Instellingen */

.building-configuration {
    margin-bottom: var(--vertical-rhythm);
}

.building-configuration h3 {
    display: inline;
}

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

.building-configuration .control .side-by-side input.input-numeric-local {
    width: 10rem;
    flex-shrink: 0;
}

.building-configuration .control .side-by-side select {
    width: auto;
    flex: 1 1 12rem;
    max-width: 100%;
}

/* Koel-/verwarmingsspoel ventilatie: fieldset heeft standaard min-inline-size: min-content
   en groeit daardoor breder dan de linkerbalk; begrenzen op de beschikbare breedte. */
.vent-spoel-fieldset {
    min-width: 0;
    min-inline-size: 0;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0.5rem 0;
    padding: 0.25rem 0.5rem 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.vent-spoel-fieldset input[type="number"] {
    width: 5.5rem;
    max-width: 100%;
    box-sizing: border-box;
}
/* Breder: placeholder "automatisch - 23" moet leesbaar zijn */
#ventilatie-inblaas-temperatuur-c {
    width: 11rem;
}
#ventilatie-seizoen-overgang-naar-zomer {
    width: 5rem;
}

.building-configuration label {
    display: block;
    margin-bottom: 0.1em;
}

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

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

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

.building-configuration .config-group .config-shortline {
    font-size: 80%;
    color: #888;
    margin-left: 1.4rem;
}

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

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

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

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

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

.building-configuration .isso-input-details {
    margin: 0.25rem 0 0.5rem 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0.35rem 0.5rem;
    background: #f4f4f4;
}
.building-configuration .isso-input-summary {
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
    list-style-position: outside;
    padding: 0.15rem 0;
}
.building-configuration .isso-input-body {
    margin-top: 0.5rem;
    padding-top: 0.35rem;
    border-top: 1px solid #ddd;
}
.building-configuration .isso-input-body > * + * {
    margin-top: var(--vertical-rhythm);
}

.weer-epw-label {
    font-size: 0.875rem;
    color: var(--text-muted, #666);
    margin-top: 0.25rem;
}

.weer-epw-label:empty {
    display: none;
}

/*
** Calculation details panel
*/

.calculation-details {
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

/* Output-balk volgorde in rechterkolom:
   tabel staat in aparte container (.calculation-results, altijd bovenaan); hier de rest:
   visualisatie energiestromen + ATG + warmte-/koudebehoefte (detail-container) ->
   Sankey -> 3D -> hoofdgrafiek -> Active House radar. */
.calculation-details #calculation-detail-container {
    order: 10;
}
.calculation-details .atg-method-controls {
    order: 10;
}
.calculation-details .fullscreen-container.results-sankey-fullscreen-wrapper {
    order: 20;
}
.calculation-details .building-3d-fullscreen-wrapper {
    order: 30;
}
.calculation-details .fullscreen-container.results-graph-fullscreen-wrapper {
    order: 40;
}
.calculation-details .active-house-radar-fullscreen-wrapper {
    order: 50;
}

/* XXX: Need to override the common template used for the header bar T_T */
.calculation-details header, .project-details header {
    position: relative;
    background: none;
    top: inherit;
    padding-left:0;
    height:auto;
    color: #222;
    z-index:0;
}


.calculation-details header,
.calculation-details footer {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.calculation-details header {
    margin-bottom: calc(4 * var(--vertical-rhythm));
}
.calculation-details footer {
    margin-top: calc(4 * var(--vertical-rhythm));
}


.calculation-details footer, .project-details footer {
    margin: 0;
    max-width: none;
    color: #222;
    padding: 0;
}


.calculation-details table {
    border-collapse: collapse;
    margin: var(--vertical-rhythm) auto;
}

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

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

.calculation-details table th,
.calculation-details table td {
    padding: 0.2em;
}

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

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

.calculation-details table th {
    text-align: left;
}

.calculation-details table .numeric {
    text-align: right;
}


.calculation-details .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-rhythm);
    margin-bottom: var(--vertical-rhythm);
}

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

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

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

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


.building-3d-fullscreen-wrapper {
    position: relative;
    margin: calc(2 * var(--vertical-rhythm)) 0;
}

.building-3d-section {
    margin: 0;
}
.building-3d-section-title {
    margin-bottom: var(--vertical-rhythm);
}

.building-3d-view-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    align-items: center;
    margin-bottom: 0.4rem;
    font-size: 0.82rem;
}
.building-3d-view-controls__label {
    margin: 0;
}
.building-3d-view-controls__df {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    user-select: none;
}
.building-3d-df-legend {
    flex: 1 1 100%;
    max-width: 14rem;
    padding: 0.3rem 0.4rem;
    font-size: 0.72rem;
    line-height: 1.35;
    border: 1px solid #d0d0d0;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.94);
}

.building-3d-viewer-stack {
    position: relative;
    width: 100%;
}

.building-3d-df-legend--overlay {
    position: absolute;
    bottom: 0.45rem;
    left: 0.45rem;
    z-index: 3;
    flex: none;
    max-width: min(16rem, 92%);
    margin: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.building-3d-df-legend__bbl {
    margin: 0.15rem 0 0.2rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #111;
    line-height: 1.3;
}

.building-3d-df-legend__mean {
    margin: 0.1rem 0 0.15rem;
    font-size: 0.68rem;
    font-weight: 500;
    color: #444;
}

.building-3d-viewer {
    width: 100%;
    height: var(--output-viz-plot-height);
    min-height: var(--output-viz-plot-height);
    max-height: var(--output-viz-plot-height);
    aspect-ratio: unset;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
}

.building-3d-fullscreen-wrapper.fullscreen-in-window {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 2rem);
    margin-top: 0.5rem;
}

.building-3d-fullscreen-wrapper.fullscreen-in-window .building-3d-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.building-3d-fullscreen-wrapper.fullscreen-in-window .building-3d-viewer-stack {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.building-3d-fullscreen-wrapper.fullscreen-in-window .building-3d-viewer {
    flex: 1;
    min-height: 55vh;
    max-height: none;
    height: auto;
}
.building-3d-viewer canvas {
    display: block;
}
.building-3d-viewer .building-3d-error {
    padding: 1rem;
    margin: 0;
    min-height: var(--output-viz-plot-height);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #c00;
    background: #fff5f5;
    border-radius: 4px;
    font-size: 0.9rem;
    line-height: 1.4;
}
.building-3d-viewer .building-3d-error--warning {
    color: #8a6d00;
    background: #fffbe6;
}

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

.calculation-details .graph img {
    width: 100%;
}

/* ATG: zelfde plot-hoogte als jaargrafiek/Sankey (niet uitgeklapt). uPlot: vul doos; geen center-shrink. */
.app-columns:not(.atg-graph-expanded) #calculation-detail-container .atg-fullscreen-wrapper .graph {
    height: var(--output-viz-plot-height);
    min-height: var(--output-viz-plot-height);
    max-height: var(--output-viz-plot-height);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-width: 0;
    overflow: hidden;
}
.app-columns:not(.atg-graph-expanded) #calculation-detail-container .atg-fullscreen-wrapper .graph img {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    max-height: 100%;
    height: auto;
    object-fit: contain;
    object-position: center center;
}

.calculation-details .graph.graph-error .error-message {
    padding: 1rem;
    color: #721c24;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
}

.calculation-details .with-spinner {
    position: relative;
}

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


.state--in-progress .calculation-details .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;
}

.state--in-progress .calculation-results .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);
    }
}


/*
** Projectdetails panel
*/

/*
** Calculation details panel
*/

.project-details {
    padding: 1rem;
}

.project-details header,
.project-details footer {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.project-details header {
    margin-bottom: calc(4 * var(--vertical-rhythm));
}
.project-details footer {
    margin-top: calc(4 * var(--vertical-rhythm));
}


.project-details label {
    display: block;
    font-weight: bold;
}


.project-details .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;

}

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

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

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

.project-details .popup button {
    margin-top:1rem;
    float:right;
}

.load-section-header {
    margin-top:1rem;
    margin-bottom:0.25rem;
}

.graph-controls {
    max-width: 56rem;
    margin: 0px auto;
}

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

.results-graph-wrapper {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.results-graph-wrapper .graph-controls--under-graph {
    margin: 0 auto 0.5rem;
    max-width: 42rem;
    flex-shrink: 0;
}

.graph-controls-panel {
    margin: 0.35rem auto 0.5rem;
    max-width: 100%;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    background: #fafafa;
    flex-shrink: 0;
}
.graph-controls-panel-summary {
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.4rem 0.55rem;
    list-style: none;
    user-select: none;
}
.graph-controls-panel-summary::-webkit-details-marker {
    display: none;
}
.graph-controls-panel-summary::before {
    content: "▸ ";
    display: inline-block;
    transition: transform 0.15s ease;
}
.graph-controls-panel[open] > .graph-controls-panel-summary::before {
    transform: rotate(90deg);
}
.graph-controls-panel-body {
    padding: 0.35rem 0.55rem 0.55rem;
    border-top: 1px solid #e4e4e4;
    max-height: min(50vh, 28rem);
    overflow-x: hidden;
    overflow-y: auto;
}
.panel-right .graph-controls-panel {
    margin-left: 0;
    margin-right: 0;
}
.panel-right .graph-controls-panel-body {
    max-height: min(45vh, 22rem);
}

.results-graph-wrapper .graph-controls--under-graph h4 {
    margin-top: 0;
}
#results-graph {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}
/* Jaartijdgrafiek (Flot): zelfde plot-hoogte als Sankey; in venster-fullscreen groter (onderstaande regels) */
.results-graph-fullscreen-wrapper:not(.fullscreen-in-window) #results-graph {
    height: var(--output-viz-plot-height);
    min-height: var(--output-viz-plot-height);
    max-height: var(--output-viz-plot-height);
    aspect-ratio: unset;
}


/* Per categorie één regel: label + datapoints */

/* 3-venster modus (zijbalk): compact, netjes verspreid in de beschikbare breedte */
.datapoints-categories {
    margin-bottom: 0.75rem;
}
.datapoints-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    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;
}
.datapoints-row .datapoints {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0;
    flex: 1 1 auto;
}

.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;
}

/* Zijbalk (3 vensters): datapunten in 2 kolommen zodat het netjes past */
.panel-right .graph-controls--under-graph .datapoints-categories {
    gap: 0.4rem 0;
}
.panel-right .graph-controls--under-graph .datapoints-row {
    gap: 0.3rem 0.4rem;
}
.panel-right .graph-controls--under-graph .datapoints-category-label {
    min-width: 6.5rem;
    font-size: 0.9rem;
}
.panel-right .graph-controls--under-graph .datapoints {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 0.4rem;
    column-gap: 0.3rem;
    margin-bottom: 0.45rem;
}
.panel-right .graph-controls--under-graph .datapoints .datapoint .series-legend-label {
    width: auto;
    max-width: 8rem;
}

/* Legenda: ronde gekleurde marker (= uPlot-legenda); kleuren gelijk aan GRAPH_SERIES_COLORS in api.js */
.datapoints .datapoint .series-legend-marker {
    flex-shrink: 0;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    background-color: #888;
}

.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-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-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.35rem;
    margin: 0;
    cursor: pointer;
    user-select: none;
    vertical-align: top;
    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 var(--orange);
    outline-offset: 2px;
}

.series-legend-label {
    line-height: 1.15;
    flex: 1 1 auto;
    min-width: 0;
}

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

/* Compactere grafiek-legend onder de grafiek */
.graph-controls--under-graph .datapoints .datapoint .control--series-legend {
    gap: 0;
}

/* Eén regel: Bereik links, Overige (grafiek opslaan + download) rechts */
.graph-controls--bereik-overige {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 2rem;
    margin-top: 0.5rem;
}
.graph-controls--bereik-overige .bereik {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
}
.graph-controls--bereik-overige .bereik h4 {
    margin: 0 0.25rem 0 0;
}
.graph-controls--bereik-overige .graph-overige {
    margin-left: 0;
    display: flex;
    grid-column: unset;
    grid-template-columns: unset;
    grid-template-rows: unset;
}
.graph-controls--bereik-overige .graph-overige > div {
    flex-basis: auto;
}
.graph-controls--bereik-overige #bereik-error-melding {
    flex-basis: 100%;
}

.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;
    grid-column: 1 / -1;
}

.graph-controls .graph-overige > div,
.graph-overige > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.graph-controls .graph-overige h4,
.graph-overige h4 {
    flex-basis: 100%;
    margin-bottom: 0;
}
.graph-controls .graph-overige button,
.graph-overige button {
    flex-shrink: 0;
}

.results-graph {
    min-height: 20rem;
}
.results-graph-fullscreen-wrapper:not(.fullscreen-in-window) .results-graph {
    min-height: var(--output-viz-plot-height);
}
/* Spinner op plek van grafiek tijdens berekening (zelfde als bij tabel) */
.results-graph.with-spinner {
    position: relative;
    --spinner-size: var(--output-viz-spinner-size);
    --spinner-speed: var(--output-viz-spinner-speed);
}
/* Tijdens berekening: vorige grafiek zichtbaar laten; pas bijwerken wanneer nieuwe resultaten er zijn */
#results-graph-content {
    width: 100%;
    height: 100%;
    min-height: 16rem;
}
.results-graph-fullscreen-wrapper:not(.fullscreen-in-window) #results-graph-content {
    min-height: 0;
}

/*
 * uPlot vendor: .uplot { width: min-content } — dat wordt het flex-minimum van #results-graph-content,
 * waardoor de plot breder wordt dan de rechterkolom en rechts uit beeld loopt (Y-assen verdwijnen).
 */
#results-graph-content .uplot {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
#results-graph {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
}

/* ATG-controls: standaard verborgen; zichtbaar in het blok waar de ATG-grafiek staat (boven de grafiek) */
.atg-method-controls {
    max-width: 52rem;
    margin: 0 auto 0.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}
.atg-method-controls > label,
.atg-method-controls > select,
.atg-method-controls .control-wrap-dependent {
    display: none !important;
}
/* Zichtbaar zodra ze in #calculation-detail-container staan (onder ATG-titel, binnen het ATG-blok) */
#calculation-detail-container .atg-method-controls > label,
#calculation-detail-container .atg-method-controls > select,
#calculation-detail-container .atg-method-controls .control-wrap-dependent {
    display: inline-block !important;
}
#calculation-detail-container .atg-method-controls .control-wrap-dependent {
    display: block !important;
}
/* Ook bij opengeklapte ATG-grafiek (layout-modus) */
.app-columns.atg-graph-expanded .atg-method-controls > label,
.app-columns.atg-graph-expanded .atg-method-controls > select,
.app-columns.atg-graph-expanded .atg-method-controls .control-wrap-dependent {
    display: inline-block !important;
}
.app-columns.atg-graph-expanded .atg-method-controls .control-wrap-dependent {
    display: block !important;
}
.atg-method-controls label {
    font-size: 0.9rem;
    color: #444;
}
.atg-method-controls select {
    min-width: 8rem;
    padding: 0.25rem 0.5rem;
}

#calculation-detail-container {
    max-width: 52rem;
    margin: 0px auto;
}

/* ATG-blok: titel → dropdowns → grafiek (niet-fullscreen) */
#calculation-detail-container .atg-fullscreen-wrapper:not(.fullscreen-in-window) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
#calculation-detail-container .atg-fullscreen-wrapper:not(.fullscreen-in-window) .atg-graph-section-title {
    flex-shrink: 0;
}
#calculation-detail-container .atg-fullscreen-wrapper:not(.fullscreen-in-window) .atg-method-controls {
    flex-shrink: 0;
}

/* Belastingduurkromme: T_buiten vs ±thermisch vermogen (Flot), zelfde breedte als overige outputgrafieken */
.belastingduurkromme-stack {
    max-width: 52rem;
    margin: 0 auto;
    width: 100%;
}
.belastingduurkromme-title {
    margin: 0.75rem auto 0.35rem;
    font-size: 1rem;
    font-weight: 600;
    color: #333;
}
.belastingduurkromme-mode-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
    align-items: center;
    margin: 0 auto 0.5rem;
}
.ldc-mode-btn {
    font: inherit;
    font-size: 0.8rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid #bbb;
    border-radius: 6px;
    background: #f5f5f5;
    color: #333;
    cursor: pointer;
    line-height: 1.2;
}
.ldc-mode-btn:hover {
    background: #ebebeb;
    border-color: #999;
}
.ldc-mode-btn--active {
    background: #e3f2fd;
    border-color: #1565c0;
    color: #0d47a1;
    font-weight: 600;
}
.ldc-mode-btn:focus-visible {
    outline: 2px solid #1565c0;
    outline-offset: 2px;
}
.belastingduurkromme-legend {
    margin: 0 auto 0.5rem;
    font-size: 0.85rem;
    color: #444;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}
.ldc-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.ldc-swatch {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
}
.ldc-swatch--heat {
    background: #c62828;
}
.ldc-swatch--cool {
    background: #1565c0;
}
.ldc-swatch--scenario-a-heat {
    background: #c62828;
}
.ldc-swatch--scenario-a-cool {
    background: #1565c0;
}
.ldc-swatch--scenario-b-heat {
    background: #ef9a9a;
}
.ldc-swatch--scenario-b-cool {
    background: #90caf9;
}
.ldc-swatch--scenario-a-atg {
    background: #377eb8;
}
.ldc-swatch--scenario-b-atg {
    background: #d32f2f;
}
.belastingduurkromme-compare-legend,
.atg-compare-legend {
    margin: 0.45rem auto 0;
    font-size: 0.85rem;
    color: #444;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}
.atg-compare-stack {
    position: relative;
    width: 100%;
}
.atg-compare-img {
    display: block;
    width: 100%;
    height: auto;
}
.atg-compare-img--b {
    position: absolute;
    inset: 0;
}
.belastingduurkromme-inner.graph {
    --spinner-size: var(--output-viz-spinner-size);
    --spinner-speed: var(--output-viz-spinner-speed);
    display: flex;
    flex-direction: column;
}
/* Zelfde plot-hoogte als Sankey */
#calculation-detail-container .belastingduurkromme-plot-wrap {
    width: 100%;
    height: var(--output-viz-plot-height);
    min-height: var(--output-viz-plot-height);
    max-height: var(--output-viz-plot-height);
    aspect-ratio: unset;
    flex-shrink: 0;
}
#calculation-detail-container #belastingduurkromme-graph-content {
    width: 100%;
    height: 100%;
    min-height: 0;
}
.belastingduurkromme-plot-wrap {
    width: 100%;
}
#belastingduurkromme-graph-content {
    width: 100%;
}
.belastingduurkromme-fullscreen-wrapper .belastingduurkromme-inner {
    width: 100%;
}
.ldc-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: #666;
    font-size: 0.95rem;
}

#calculation-detail-container .block {
    /* 1) Margins determined for alignment of contained children with non-blocked graphs */
    display: flex;
    flex-wrap: wrap;
    max-width: 42rem;
    margin: 0px auto;
}

#calculation-detail-container .block > * {
    margin-left: 0.2rem;
    margin-right: 0.2rem;
}

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

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

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

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


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

#calculation-detail-container .field .label {
    font-weight: bold;
}

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

#calculation-detail-container .field.placeholder .label,
#calculation-detail-container .field.placeholder .value {
    visibility: hidden;
}

/* Active House Radar: rechthoekige container (breed > hoog), geen clipping van assenlabels */
.active-house-radar-fullscreen-wrapper {
    position: relative;
    max-width: 52rem;
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
}

.active-house-radar-block {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
    max-width: 52rem;
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
}

.active-house-radar-fullscreen-wrapper .active-house-radar-block {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    max-width: none;
}

.active-house-radar-title {
    font-size: 1rem;
    margin: 0 2.75rem 0.5rem 0;
    font-weight: 600;
}
.active-house-radar-svg-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.5rem 0;
    width: 100%;
    overflow: visible;
    /* viewBox activeHouseRadar: 576×364 → landschap, niet vierkant */
    aspect-ratio: 576 / 364;
    min-height: 240px;
    max-height: min(420px, 55vh);
}
/* Spinner tijdens herberekening: zichtbaar en goed gepositioneerd */
.active-house-radar-loading.with-spinner {
    min-height: 12rem;
    aspect-ratio: 576 / 364;
    --spinner-size: var(--output-viz-spinner-size);
    --spinner-speed: var(--output-viz-spinner-speed);
}
.active-house-radar-svg {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    display: block;
    overflow: visible;
}

.active-house-radar-fullscreen-wrapper.fullscreen-in-window {
    display: flex;
    flex-direction: column;
    max-width: none;
    max-height: calc(100vh - 2rem);
    margin-top: 0.5rem;
}

.active-house-radar-fullscreen-wrapper.fullscreen-in-window .active-house-radar-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Geen aspect-ratio hier: die beperkt bij kolom-flex de breedte (klein diagram midden op wit). */
.active-house-radar-fullscreen-wrapper.fullscreen-in-window .active-house-radar-svg-wrap {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    margin: 0.25rem 0;
    aspect-ratio: unset;
    max-height: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.active-house-radar-fullscreen-wrapper.fullscreen-in-window .active-house-radar-svg-wrap.active-house-radar-loading {
    aspect-ratio: unset;
    min-height: 8rem;
}

.active-house-radar-fullscreen-wrapper.fullscreen-in-window .active-house-radar-svg {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    flex-shrink: 1;
    overflow: visible;
}
.active-house-radar-disclaimer {
    font-size: 0.8rem;
    color: #666;
    margin: 0.5rem 0 0 0;
    line-height: 1.35;
}

.config-group--active-house .ah-subheading {
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0.75rem 0 0.35rem 0;
    color: #444;
}

.config-group--active-house .ah-threshold-details {
    margin: 0.5rem 0 0.75rem 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0.35rem 0.5rem;
    background: #fafafa;
}
.config-group--active-house .ah-threshold-summary {
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
    list-style-position: outside;
    padding: 0.15rem 0;
}
.config-group--active-house .ah-threshold-body {
    margin-top: 0.5rem;
    padding-top: 0.35rem;
    border-top: 1px solid #e8e8e8;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #444;
    max-height: 14rem;
    overflow-y: auto;
}
.config-group--active-house .ah-spec-para {
    margin: 0 0 0.55rem 0;
}
.config-group--active-house .ah-spec-para:last-of-type {
    margin-bottom: 0.35rem;
}
.config-group--active-house .ah-spec-kicker {
    display: block;
    font-weight: 600;
    color: #222;
    margin-bottom: 0.15rem;
}
.config-group--active-house .ah-spec-footnote {
    margin-top: 0.5rem;
    margin-bottom: 0;
    font-size: 0.72rem;
    line-height: 1.4;
}

/* Range slider: percentage glas/buitenwand */
.control--range .range-slider-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.control--range .range-slider {
    flex: 1;
    min-width: 6rem;
}
.control--range .range-value {
    min-width: 2rem;
    text-align: right;
}

/* Locatie (optioneel): autocomplete suggesties, even breed als andere invoervelden */
.control--locatie-autocomplete {
    position: relative;
}
.building-configuration .control--locatie-autocomplete input,
.control--locatie-autocomplete input {
    width: 100%;
    box-sizing: border-box;
}
.locatie-suggestions {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 2px;
    max-height: 12rem;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    z-index: 100;
    display: none;
}
.locatie-suggestions.open {
    display: block;
}
.locatie-suggestion-item {
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    font-size: 0.9rem;
    border-bottom: 1px solid #eee;
}
.locatie-suggestion-item:last-child {
    border-bottom: none;
}
.locatie-suggestion-item:hover,
.locatie-suggestion-item:focus {
    background: #f0f4f8;
}
.control--range .range-glass-m2 {
    min-width: 4rem;
    text-align: right;
    color: #555;
    font-size: 0.9em;
}

/* Percentage beglazing te openen: placeholder in lichtgrijs */
.input--placeholder-pct::placeholder {
    color: #9ca3af;
}
.control--ramen-pct input[type="number"] {
    width: 4rem;
    text-align: right;
}

/*
** Fullscreen binnen browservenster: tabel, ATG-grafiek, resultatengrafiek (blijft in browservenster)
*/
body.fullscreen-in-window-active { overflow: hidden; }
.fullscreen-container {
    position: relative;
}
/* Fullscreen: alleen midden + rechterkolom; linkerbalk (invoer) blijft zichtbaar.
   Rechterkolom niet verbergen: de fullscreen-container zit daarin en moet zichtbaar blijven. */
.fullscreen-container.fullscreen-in-window {
    position: fixed;
    top: var(--header-height, 0);
    left: var(--fullscreen-left-px, 0);
    width: calc(100vw - var(--fullscreen-left-px, 0));
    height: calc(100vh - var(--header-height, 0));
    z-index: 9999;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: 1rem;
    box-sizing: border-box;
}
/* Bij fullscreen alleen middenkolom en resizers verbergen; panel-right blijft (bevat de grafiek-container) */
.app-columns.fullscreen-hide-center-right .panel-center,
.app-columns.fullscreen-hide-center-right .resizer {
    display: none !important;
}

/* ATG "hele scherm" = layout-modus: midden 0%, rechter neemt rest; alleen ATG-grafiek zichtbaar in rechter gebied */
.app-columns.atg-graph-expanded .panel-center,
.app-columns.atg-graph-expanded .resizer {
    display: none !important;
}
.app-columns.atg-graph-expanded .panel-right {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    position: relative;
}
.app-columns.atg-graph-expanded .panel-right .sidebar-output-collapse-target {
    flex: 1 1 auto;
    min-height: 0;
}
.app-columns.atg-graph-expanded .panel-right .sidebar-panel-topbar--output,
.app-columns.atg-graph-expanded .panel-right .output-toolbar {
    padding-top: 0.12rem;
    padding-bottom: 0.12rem;
}
.app-columns.atg-graph-expanded {
    padding-top: 0.15rem;
}
.app-columns.atg-graph-expanded .panel-right .calculation-results .fullscreen-container.results-table-fullscreen-wrapper,
.app-columns.atg-graph-expanded .panel-right .calculation-results .elaboration,
/* Vergelijk-modus + sankey staan ook in .calculation-results; anders blijven ze boven ATG-fullscreen zichtbaar. */
.app-columns.atg-graph-expanded .panel-right .calculation-results .compare-delta-panel,
.app-columns.atg-graph-expanded .panel-right .calculation-results #compare-delta-panel,
.app-columns.atg-graph-expanded .panel-right .fullscreen-container.results-sankey-fullscreen-wrapper,
.app-columns.atg-graph-expanded .panel-right .calculation-results .isso51-block {
    display: none !important;
}
/* Radar wordt naast #calculation-detail-container onder #panel-calculation-details gehangen */
.app-columns.atg-graph-expanded .panel-right #panel-calculation-details > .active-house-radar-fullscreen-wrapper {
    display: none !important;
}
/* Geen energietabelruimte tijdens ATG-uitvouw: meer hoogte voor de plot */
.app-columns.atg-graph-expanded .panel-right .calculation-results {
    display: none !important;
}
.app-columns.atg-graph-expanded .panel-right #panel-calculation-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0.2rem 0.35rem 0.35rem;
}
.app-columns.atg-graph-expanded .panel-right .building-3d-fullscreen-wrapper,
.app-columns.atg-graph-expanded .panel-right .results-graph-fullscreen-wrapper {
    display: none !important;
}
.app-columns.atg-graph-expanded #calculation-detail-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: none;
    width: 100%;
    margin: 0;
    min-height: 0;
}
/* :has(...) ziet geen match op het element zelf; ATG staat als direct kind — zonder :not(#atg…)/:not(.atg-fullscreen-wrapper) verdwijnt de grafiek. */
.app-columns.atg-graph-expanded #calculation-detail-container > *:not(#atg-graph-fullscreen-container):not(.atg-fullscreen-wrapper):not(:has(#atg-graph-fullscreen-container)):not(:has(.atg-fullscreen-wrapper)) {
    display: none !important;
}
.app-columns.atg-graph-expanded #calculation-detail-container > #atg-graph-fullscreen-container,
.app-columns.atg-graph-expanded #calculation-detail-container > .atg-fullscreen-wrapper,
.app-columns.atg-graph-expanded #calculation-detail-container > *:has(#atg-graph-fullscreen-container),
.app-columns.atg-graph-expanded #calculation-detail-container > *:has(.atg-fullscreen-wrapper) {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    max-width: none;
}
.app-columns.atg-graph-expanded #atg-graph-fullscreen-container,
.app-columns.atg-graph-expanded .atg-fullscreen-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
/* Volgorde: titel → plot (flex-groei) → legenda → dropdowns onderaan */
.app-columns.atg-graph-expanded .atg-fullscreen-wrapper > .atg-graph-section-title {
    flex-shrink: 0;
    order: 1;
    margin: 0 0 0.1rem 0;
    padding-right: 2.25rem;
    font-size: 0.8rem;
    line-height: 1.15;
}
/* flex-basis 0 + min-height 0: alle resterende kolomhoogte naar de plot (geen kunstmatige max) */
.app-columns.atg-graph-expanded .atg-fullscreen-wrapper > .graph {
    order: 20;
    flex: 1 1 0;
    min-height: 0;
    align-self: stretch;
    width: 100%;
    position: relative;
}
.app-columns.atg-graph-expanded .atg-fullscreen-wrapper > .atg-compare-legend {
    flex-shrink: 0;
    order: 25;
    margin: 0.1rem 0 0.15rem;
}
.app-columns.atg-graph-expanded .atg-fullscreen-wrapper > .atg-method-controls {
    flex-shrink: 0;
    order: 30;
}
.app-columns.atg-graph-expanded .atg-fullscreen-wrapper .atg-method-controls {
    flex-shrink: 0;
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}
.app-columns.atg-graph-expanded .atg-fullscreen-wrapper .atg-compare-legend {
    flex-shrink: 0;
}
/* Vul de plot-doos: 100%×100% + object-fit = maximaal schalen (auto-breedte/hoogte liet te veel marge) */
.app-columns.atg-graph-expanded .atg-fullscreen-wrapper > .graph > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: contain;
    object-position: center center;
    box-sizing: border-box;
}
/* Spinner over ATG-grafiek tijdens verversen (grafiek zelf blijft zichtbaar) */
/* Commentaar onder grafiek bij fullscreen: gebruikte EPW-klimaatbestand */
.graph-epw-caption {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: #666;
    word-break: break-all;
}
.graph-epw-caption .graph-epw-filename { margin-right: 0.5rem; }
.graph-epw-caption .graph-epw-link { color: #0066aa; }

.atg-fullscreen-wrapper .graph.with-spinner {
    position: relative;
    --spinner-size: var(--output-viz-spinner-size);
    --spinner-speed: var(--output-viz-spinner-speed);
}

/* ATG uPlot-keten: volle breedte + resterende hoogte in vaste plot-doos (zelfde UX als thermische vraag) */
.atg-fullscreen-wrapper .graph .atg-uplot-mount {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.atg-fullscreen-wrapper .graph .atg-uplot-shell {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}
.atg-fullscreen-wrapper .graph .atg-uplot-root {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    width: 100%;
}
.atg-fullscreen-wrapper .graph .atg-uplot-shell {
    position: relative;
}
.atg-fullscreen-wrapper .graph .atg-caption-overlay {
    position: absolute;
    z-index: 3;
    font-size: 0.68rem;
    line-height: 1.3;
    color: #9a9a9a;
    text-align: left;
    pointer-events: none;
}

/* Uitgeklapte ATG: zelfde patroon als vroeger SVG-img (absolute inset in flex-groeidoos) */
.app-columns.atg-graph-expanded .atg-fullscreen-wrapper > .graph > .atg-uplot-mount {
    position: absolute;
    inset: 0;
    flex: none;
    width: auto;
    height: auto;
}
main.state--in-progress .atg-fullscreen-wrapper .graph.with-spinner::before,
.atg-fullscreen-wrapper .graph.with-spinner.atg-graph-loading::before {
    content: '';
    position: absolute;
    left: calc(50% - var(--spinner-size) / 2);
    top: calc(50% - var(--spinner-size) / 2);
    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;
    pointer-events: none;
}
/* Sluitknop rechtsboven in uitgevouwen ATG-gebied */
.atg-expanded-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 20;
    width: 2rem;
    height: 2rem;
    padding: 0;
    font-size: 1.25rem;
    line-height: 1;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.95);
    cursor: pointer;
    flex-shrink: 0;
}
.atg-expanded-close:hover {
    background: #fff;
}
/* Bij fullscreen: verberg alleen de inhoud van calculation-detail-container die niet de actieve fullscreen is;
   ATG-dropdowns zitten in het ATG-fullscreen-blok en blijven daarmee zichtbaar. */
body.fullscreen-in-window-active #calculation-detail-container > *:not(.fullscreen-container.fullscreen-in-window) {
    display: none !important;
}
body.fullscreen-in-window-active #calculation-detail-container {
    display: block !important;
}
.fullscreen-container.fullscreen-in-window .results-graph-wrapper {
    flex: 1;
    max-width: none;
    display: flex;
    flex-direction: column;
}
/* Volledig scherm (dekt 2 vensters): Datapunten netjes horizontaal en verticaal uitgelijnd in een grid */
.fullscreen-container.results-graph-fullscreen-wrapper.fullscreen-in-window .graph-controls-panel {
    max-width: none;
    width: 100%;
}
.fullscreen-container.results-graph-fullscreen-wrapper.fullscreen-in-window .graph-controls-panel-body {
    max-height: none;
    overflow: visible;
}
.fullscreen-container.results-graph-fullscreen-wrapper.fullscreen-in-window .graph-controls--under-graph {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}
.fullscreen-container.results-graph-fullscreen-wrapper.fullscreen-in-window .datapoints-categories {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.fullscreen-container.results-graph-fullscreen-wrapper.fullscreen-in-window .datapoints-row {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: 0.75rem 1rem;
    align-items: start;
    margin-bottom: 0;
}
.fullscreen-container.results-graph-fullscreen-wrapper.fullscreen-in-window .datapoints-category-label {
    grid-column: 1;
    min-width: 0;
}
.fullscreen-container.results-graph-fullscreen-wrapper.fullscreen-in-window .datapoints-row .datapoints {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    row-gap: 0.5rem;
    column-gap: 0.75rem;
    align-items: start;
}
.fullscreen-container.results-graph-fullscreen-wrapper.fullscreen-in-window .datapoints .datapoint {
    display: flex;
    align-items: center;
    min-height: 2rem;
}
.fullscreen-container.results-graph-fullscreen-wrapper.fullscreen-in-window .datapoints .datapoint .control label {
    width: auto;
    max-width: none;
}
.fullscreen-container.fullscreen-in-window.atg-fullscreen-wrapper .atg-method-controls {
    flex-shrink: 0;
    margin-bottom: 0.5rem;
}
.fullscreen-container.fullscreen-in-window.atg-fullscreen-wrapper .graph {
    flex: 1;
    min-height: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}
.fullscreen-container.fullscreen-in-window.atg-fullscreen-wrapper .graph > .atg-uplot-mount {
    position: absolute;
    inset: 0;
    flex: none;
    width: auto;
    height: auto;
}
.fullscreen-container.fullscreen-in-window #results-graph,
.fullscreen-container.results-graph-fullscreen-wrapper.fullscreen-in-window #results-graph {
    flex: 1;
    max-width: none;
    aspect-ratio: auto;
    min-height: 60vh;
}
.fullscreen-container.fullscreen-in-window #results-graph-content {
    min-height: 55vh;
    height: 100%;
}
.fullscreen-container.belastingduurkromme-fullscreen-wrapper.fullscreen-in-window .belastingduurkromme-plot-wrap,
.fullscreen-container.fullscreen-in-window .belastingduurkromme-plot-wrap {
    flex: 1;
    max-width: none;
    min-height: 60vh;
    aspect-ratio: unset;
    display: flex;
    flex-direction: column;
}
.fullscreen-container.fullscreen-in-window #belastingduurkromme-graph-content {
    min-height: 55vh;
    height: 100%;
    flex: 1;
}
.fullscreen-container.fullscreen-in-window .graph img {
    max-height: calc(100vh - 6rem);
    width: auto;
    object-fit: contain;
}
.fullscreen-toggle {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    z-index: 10;
    padding: 0.25rem 0.5rem;
    font-size: 1.25rem;
    line-height: 1;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
}
.fullscreen-toggle:hover {
    background: #fff;
}
/* ATG-fullscreen-knop staat in .atg-fullscreen-wrapper (zelfde absolute positie als Sankey) */
.results-table-fullscreen-wrapper .fullscreen-toggle {
    top: 0;
    right: 0;
}
.results-graph-fullscreen-wrapper .fullscreen-toggle,
.belastingduurkromme-fullscreen-wrapper .fullscreen-toggle,
.graph-fullscreen-wrapper .fullscreen-toggle,
.building-3d-fullscreen-wrapper .fullscreen-toggle,
.active-house-radar-fullscreen-wrapper .fullscreen-toggle,
.results-sankey-fullscreen-wrapper .fullscreen-toggle {
    top: 0.25rem;
    right: 0.25rem;
}
/* Jaargrafiek venster-fullscreen: toolbar kan scrollen/clippen — vaste ✕ op viewport (zie hieronder). */

.results-sankey-fullscreen-wrapper.fullscreen-in-window {
    display: flex;
    flex-direction: column;
}

.results-sankey-fullscreen-wrapper.fullscreen-in-window .energy-sankey-block {
    flex: 1;
    min-height: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top: 0;
    display: flex;
    flex-direction: column;
}

/* Ruimte onder titel vullen; Sankey verticaal centreren als Plotly-lager is dan de slot. */
.results-sankey-fullscreen-wrapper.fullscreen-in-window .energy-sankey-plot {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}
.results-graph-fullscreen-close {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    z-index: 10050;
    width: 2rem;
    height: 2rem;
    padding: 0;
    font-size: 1.25rem;
    line-height: 1;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.95);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
/* Belastingduurkromme: dynamische sluitknop als direct child van .fullscreen-container */
.fullscreen-container:not(.fullscreen-in-window) > .results-graph-fullscreen-close {
    display: none !important;
}
.fullscreen-container.fullscreen-in-window > .results-graph-fullscreen-close {
    display: flex;
}
/* Jaargrafiek ✕: in toolbar verborgen tot venster-fullscreen; tijdens fullscreen hangt knop op document.body (data-oc-fs-portal), anders faalt geen enkele descendant-CSS. */
#results-graph-fullscreen-wrapper:not(.fullscreen-in-window) #results-graph-fullscreen-close-btn {
    display: none !important;
}
#results-graph-fullscreen-close-btn[data-oc-fs-portal="1"] {
    display: none !important;
}
body.fullscreen-in-window-active #results-graph-fullscreen-close-btn[data-oc-fs-portal="1"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: fixed !important;
    top: calc(var(--header-height, 3.5rem) + 0.4rem);
    right: max(0.75rem, env(safe-area-inset-right, 0px));
    z-index: 10300;
    width: 2.35rem;
    height: 2.35rem;
    margin: 0;
    padding: 0;
    font-size: 1.2rem;
    line-height: 1;
    border: 1px solid #bbb;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    cursor: pointer;
}
/* Dubbele ✕ voorkomen: ⛶ staat in toolbar; in venster-fullscreen sluit alleen de vaste knop hierboven. */
.results-graph-fullscreen-wrapper.fullscreen-in-window .results-graph-fs-chrome .fullscreen-toggle {
    display: none !important;
}
.results-graph-fullscreen-close:hover {
    background: #fff;
}

/* Toolbar boven jaargrafiek: absolute top/right-knoppen werden door .results-graph-wrapper (flex) bedekt.
   z-index: 0 → eigen stacking context, zodat de sticky .results-graph-fs-chrome (z-index 100100)
   niet boven andermans venster-fullscreen (z-index 9999) uitsteekt. */
.fullscreen-container.results-graph-fullscreen-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    z-index: 0;
}
/* Boven dialogen (z-index 10000); geen horizontaal scrollen door te brede uPlot → toolbar/Y-as blijven bruikbaar */
.fullscreen-container.results-graph-fullscreen-wrapper.fullscreen-in-window {
    z-index: 10100;
    /* geen overflow-x:hidden hier: knipt position:fixed ✕ weg in sommige browsers; breedte begrenzen via #results-graph */
}
.results-graph-fs-chrome {
    position: sticky;
    top: 0;
    z-index: 100100;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    width: 100%;
    min-height: 2.5rem;
    padding: 0.2rem 0.15rem 0.35rem;
    margin: 0 0 0.15rem 0;
    background: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid #e0e0e0;
    box-sizing: border-box;
    pointer-events: auto;
}
.results-graph-fs-chrome .fullscreen-toggle,
.results-graph-fs-chrome .results-graph-fullscreen-close {
    position: static !important;
    top: auto !important;
    right: auto !important;
    z-index: auto;
    flex: 0 0 auto;
}
.fullscreen-container:fullscreen,
.fullscreen-container:-webkit-full-screen,
.fullscreen-container:-moz-full-screen,
.fullscreen-container:-ms-fullscreen {
    width: 100vw;
    height: 100vh;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: 1rem;
    box-sizing: border-box;
}
.fullscreen-container:fullscreen .results-graph-wrapper,
.fullscreen-container:-webkit-full-screen .results-graph-wrapper,
.fullscreen-container:-moz-full-screen .results-graph-wrapper,
.fullscreen-container:-ms-fullscreen .results-graph-wrapper {
    flex: 1;
    max-width: none;
    display: flex;
    flex-direction: column;
}
.fullscreen-container:fullscreen #results-graph,
.fullscreen-container:-webkit-full-screen #results-graph,
.fullscreen-container:-moz-full-screen #results-graph,
.fullscreen-container:-ms-fullscreen #results-graph {
    flex: 1;
    max-width: none;
    aspect-ratio: auto;
    min-height: 20rem;
}
.fullscreen-container:fullscreen #results-graph-content,
.fullscreen-container:-webkit-full-screen #results-graph-content,
.fullscreen-container:-moz-full-screen #results-graph-content,
.fullscreen-container:-ms-fullscreen #results-graph-content {
    min-height: 24rem;
}
.fullscreen-container:fullscreen .graph img,
.fullscreen-container:-webkit-full-screen .graph img,
.fullscreen-container:-moz-full-screen .graph img,
.fullscreen-container:-ms-fullscreen .graph img {
    max-height: calc(100vh - 6rem);
    width: auto;
    object-fit: contain;
}

/* Import-wizard (plattegrond PDF/JPG/PNG) */
.import-wizard-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.45);
    display: none;
    align-items: flex-start;
    justify-content: center;
    /* Ruimte boven/beneden zodat het venster niet tegen de viewportrand plakt */
    padding: clamp(1.75rem, 7vh, 3.5rem) 1rem clamp(1.25rem, 4vh, 2.5rem);
    overflow: auto;
    box-sizing: border-box;
}
.import-wizard-overlay.import-wizard-overlay--visible {
    display: flex;
}
.import-wizard-modal {
    background: #fff;
    border-radius: 6px;
    border: 1px solid #bbb;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    max-width: min(96vw, 92rem);
    width: min(96vw, 92rem);
    max-height: calc(100dvh - clamp(3.25rem, 11vh, 6.5rem));
    padding: 1.25rem 1.25rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    box-sizing: border-box;
}
.import-wizard-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0;
    padding-top: 0.15rem;
    flex-shrink: 0;
}
.import-wizard-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}
.import-wizard-head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.import-wizard-progress {
    font-size: 0.75rem;
    color: #666;
    min-height: 0.25rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.import-wizard-body {
    margin: 0;
    padding-top: 0.35rem;
    min-height: 4rem;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.import-wizard-workspace {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(240px, 22rem);
    grid-template-rows: minmax(0, 1fr);
    gap: 1rem 1.25rem;
    align-items: stretch;
}
.import-wizard-workspace-preview {
    min-width: 0;
    min-height: min(18rem, 38vh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.import-wizard-workspace-panel {
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.15rem 0 0.15rem 0.85rem;
    border-left: 1px solid #e4e4e4;
}
.import-wizard-panel-intro {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.45;
    color: #333;
}
.import-wizard-preview-wrap--workspace {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin: 0;
}
.import-wizard-preview-wrap--workspace .import-wizard-preview-viewport {
    max-height: min(68vh, 780px);
    min-height: min(280px, 32vh);
}
.import-wizard-workspace-panel .import-wizard-compass {
    width: min(10rem, 100%);
    height: min(10rem, 100%);
    max-width: 180px;
    max-height: 180px;
    min-width: 7.5rem;
    min-height: 7.5rem;
    margin: 0.25rem 0;
}
.import-wizard-north-deg-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}
.import-wizard-north-deg-row input {
    width: 5.75rem;
    max-width: 100%;
}
.import-wizard-north-deg-suffix {
    font-size: 0.95rem;
    font-weight: 600;
    color: #444;
}
.import-wizard-workspace-panel .import-wizard-glass-grid {
    grid-template-columns: 1fr;
}
.import-wizard-workspace-panel .import-wizard-actions-row {
    flex-direction: column;
    align-items: stretch;
}
@media (max-width: 52rem) {
    .import-wizard-workspace {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(220px, min(54vh, 560px)) auto;
    }
    .import-wizard-workspace-preview {
        min-height: 0;
        max-height: min(54vh, 560px);
    }
    .import-wizard-workspace-panel {
        border-left: none;
        border-top: 1px solid #e4e4e4;
        padding: 0.75rem 0 0;
        max-height: min(42vh, 400px);
    }
    .import-wizard-preview-wrap--workspace .import-wizard-preview-viewport {
        max-height: min(50vh, 520px);
    }
}
.import-wizard-error {
    color: #a30;
    font-size: 0.85rem;
    margin: 0.25rem 0;
    flex-shrink: 0;
}
.import-wizard-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.35rem;
    padding-top: 0.65rem;
    border-top: 1px solid #e0e0e0;
    flex-shrink: 0;
}
.import-wizard-foot-trailing {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem 1rem;
}
.import-wizard-foot-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.import-wizard-pdf-page-wrap {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.import-wizard-pdf-page-wrap[hidden] {
    display: none !important;
}
.import-wizard-pdf-page-label {
    font-size: 0.85rem;
    color: #444;
    margin: 0;
    white-space: nowrap;
}
.import-wizard-pdf-page-wrap select {
    min-width: 4rem;
}
.import-wizard-preview-wrap {
    text-align: left;
    margin: 0.5rem 0;
    max-width: 100%;
}
.import-wizard-preview-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.4rem;
}
.import-wizard-zoom-btn {
    min-width: 2.25rem;
    font-weight: 600;
    line-height: 1.2;
}
.import-wizard-preview-zoom-hint {
    font-size: 0.78rem;
    color: #555;
    margin: 0.4rem 0 0;
    line-height: 1.35;
}
.import-wizard-preview-viewport {
    max-height: min(78vh, 900px);
    min-height: 280px;
    overflow: auto;
    border: 1px solid #bbb;
    border-radius: 4px;
    background: #e9e9e9;
    touch-action: none;
    outline: none;
    user-select: none;
    -webkit-user-select: none;
}
.import-wizard-preview-viewport--panning {
    cursor: grabbing;
}
.import-wizard-preview-viewport:not(.import-wizard-preview-viewport--panning) {
    cursor: crosshair;
}
.import-wizard-preview-viewport canvas {
    display: block;
    margin: 0;
    border: none;
    background: #fafafa;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.import-wizard-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.import-wizard-scale-dist-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
}
.import-wizard-scale-dist-label {
    font-size: 0.9rem;
    font-weight: 600;
}
.import-wizard-scale-dist-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.65rem;
}
.import-wizard-scale-dist-controls input[type="number"] {
    width: min(12rem, 55vw);
    max-width: 100%;
}
.import-wizard-pick-mode-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.15rem;
}
.import-wizard-pick-mode-btn {
    margin: 0;
    padding: 0.35rem 0.55rem;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid #bbb;
    border-radius: 6px;
    background: #f5f5f5;
    color: #333;
    cursor: pointer;
    line-height: 1.2;
}
.import-wizard-pick-mode-btn:hover {
    background: #ebebeb;
}
.import-wizard-pick-mode-btn.is-selected {
    border-color: var(--orange, #ee7601);
    background: var(--orange, #ee7601);
    color: #fff;
}
.import-wizard-pick-mode-btn.is-selected:hover {
    border-color: var(--orange-dark, #e84b0f);
    background: var(--orange-dark, #e84b0f);
    color: #fff;
}
.import-wizard-scale-unit-bar {
    display: inline-flex;
    border: 1px solid #bbb;
    border-radius: 6px;
    overflow: hidden;
    background: #eee;
}
.import-wizard-scale-unit-btn {
    margin: 0;
    padding: 0.35rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 600;
    border: none;
    background: transparent;
    color: #333;
    cursor: pointer;
    line-height: 1.2;
}
.import-wizard-scale-unit-btn:hover {
    background: rgba(0, 0, 0, 0.06);
}
.import-wizard-scale-unit-btn.is-selected {
    background: var(--orange, #ee7601);
    color: #fff;
}
.import-wizard-scale-unit-btn.is-selected:hover {
    background: var(--orange-dark, #e84b0f);
    color: #fff;
}
.import-wizard-hint {
    font-size: 0.78rem;
    color: #555;
    margin-top: 0.5rem;
}
.import-wizard-compass {
    width: min(13.5rem, 85vw);
    height: min(13.5rem, 85vw);
    max-width: 240px;
    max-height: 240px;
    min-width: 10.5rem;
    min-height: 10.5rem;
    margin: 0.65rem 0;
    box-sizing: border-box;
    flex-shrink: 0;
    transform-origin: 50% 50%;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 45%, #f5f5f5 0%, #e2e2e2 55%, #d4d4d4 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.12);
    padding: 0.5rem;
}
.import-wizard-compass:active {
    cursor: grabbing;
}
.import-wizard-compass svg {
    width: 100%;
    height: 100%;
    display: block;
}
.import-wizard-glass-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.35rem 0.75rem;
    margin: 0.5rem 0;
}
.import-wizard-glass-grid label {
    margin-right: 0.35rem;
}
.project-details-import-line {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
}
.btn-primary, .btn-secondary {
    font-size: 0.85rem;
    padding: 0.35rem 0.65rem;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid #ccc;
    background: #f5f5f5;
}
.btn-primary {
    background: var(--orange, #e85c00);
    color: #fff;
    border-color: transparent;
}
.btn-primary:hover {
    filter: brightness(1.05);
}
.btn-secondary:hover {
    background: #eee;
}

/* Startscherm & modals (3D BAG / projecten) */
body:has(.tekentool-start-overlay:not(.hidden)) header {
    z-index: 2101;
    pointer-events: auto;
}
.tekentool-start-overlay {
    position: fixed;
    top: var(--header-height, 3.5rem);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    background: rgba(248, 248, 248, 0.97);
    overflow-y: auto;
    padding: 1.25rem 1rem 2rem;
    box-sizing: border-box;
}
.tekentool-start-overlay.hidden {
    display: none !important;
}
.tekentool-start-panel {
    max-width: 52rem;
    margin: 0 auto;
}
.tekentool-start-title {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0 0 1rem;
}
.tekentool-start-actions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.tekentool-start-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 0.85rem 0.9rem;
    border-radius: 8px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    min-height: 5.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: border-color 0.15s, box-shadow 0.15s;
    font: inherit;
}
.tekentool-start-tile:hover {
    border-color: var(--orange, #e85c00);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.tekentool-start-tile__icon {
    font-size: 1.5rem;
    line-height: 1;
    margin-bottom: 0.35rem;
}
.tekentool-start-tile__label {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.25;
}
.tekentool-start-recent-wrap {
    margin-top: 0.5rem;
}
.tekentool-start-recent-title {
    font-size: 1rem;
    margin: 0 0 0.5rem;
    font-weight: 600;
}
.tekentool-start-recent-empty {
    font-size: 0.88rem;
    color: #666;
    margin: 0;
}
.tekentool-start-recent-empty.hidden {
    display: none !important;
}
.tekentool-start-recent-item {
    display: flex;
    align-items: stretch;
    gap: 0.35rem;
}
.tekentool-start-recent-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.tekentool-start-recent-list--full {
    max-height: min(60vh, 28rem);
    overflow-y: auto;
    margin-bottom: 0.75rem;
}
.tekentool-start-recent-btn {
    flex: 1;
    min-width: 0;
    width: auto;
    text-align: left;
    padding: 0.5rem 0.65rem;
    border-radius: 6px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    font-size: 0.88rem;
    font: inherit;
}
.tekentool-start-recent-btn:hover {
    border-color: var(--orange, #e85c00);
}
.tekentool-start-recent-delete {
    flex-shrink: 0;
    width: 2.35rem;
    min-width: 2.35rem;
    align-self: stretch;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    color: #c62828;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tekentool-start-recent-delete:hover,
.tekentool-start-recent-delete:focus-visible {
    background: #ffebee;
    border-color: #c62828;
    outline: none;
}
.tekentool-modal {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
}
.tekentool-modal.hidden {
    display: none !important;
}
.tekentool-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
}
.tekentool-modal__panel {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 10px;
    max-width: 28rem;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1rem 1.1rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.tekentool-modal__panel--wide {
    max-width: 36rem;
}
.tekentool-modal__panel h2 {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
}
.tekentool-modal__close {
    margin-top: 0.5rem;
}
.tekentool-3dbag-help {
    font-size: 0.85rem;
    color: #555;
    margin: 0 0 0.75rem;
    line-height: 1.4;
}
.tekentool-3dbag-label {
    display: block;
    font-size: 0.85rem;
    margin: 0 0 0.25rem;
}
.tekentool-3dbag-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.45rem 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 0.75rem;
}
.tekentool-3dbag-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.tekentool-3dbag-loading {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 1.35rem;
    margin: 0 0 0.65rem;
    font-size: 0.82rem;
    color: #555;
}
.tekentool-3dbag-loading.hidden {
    display: none !important;
}
.tekentool-3dbag-spinner {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(0, 0, 0, 0.12);
    border-top-color: var(--orange, #e85c00);
    border-radius: 50%;
    animation: tekentool-3dbag-spin 0.7s linear infinite;
}
.tekentool-3dbag-loading-text {
    line-height: 1.2;
}
@keyframes tekentool-3dbag-spin {
    to {
        transform: rotate(360deg);
    }
}
.tekentool-3dbag-auto-dak-label {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin-bottom: 0.6rem;
    font-size: 0.88rem;
    line-height: 1.35;
    cursor: pointer;
}
.tekentool-3dbag-auto-dak-label input {
    margin-top: 0.2rem;
    flex-shrink: 0;
}
.tekentool-3dbag-auto-dak-label--modal {
    margin-top: 0.5rem;
    margin-bottom: 0.35rem;
}
.tekentool-3dbag-error {
    color: #b00020;
    font-size: 0.85rem;
    margin: 0.5rem 0 0;
}
.tekentool-3dbag-error.hidden {
    display: none !important;
}
.tekentool-3dbag-candidates {
    margin: 0.75rem 0;
    max-height: min(40vh, 16rem);
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 0.5rem 0.6rem;
    background: #fafafa;
}
.tekentool-3dbag-candidates.hidden {
    display: none !important;
}
.tekentool-3dbag-match {
    padding: 0.45rem 0;
    border-bottom: 1px solid #e8e8e8;
}
.tekentool-3dbag-match:last-child {
    border-bottom: none;
}
.tekentool-3dbag-match-adres {
    font-weight: 600;
    font-size: 0.88rem;
    margin: 0 0 0.35rem;
}
.tekentool-3dbag-match-geen-pand {
    font-size: 0.8rem;
    color: #777;
    margin: 0;
}
.tekentool-3dbag-pand-pick {
    display: block;
    width: 100%;
    text-align: left;
    margin: 0.25rem 0 0;
    padding: 0.35rem 0.45rem;
    font-size: 0.8rem;
}

/* --- Thermal system visualization (plan §4) --- */
:root {
    --ts-color-outdoor: #e8eef3;
    --ts-color-building: #f0ebe0;
    --ts-color-install: #e8f0e8;
    --ts-color-energy: #faf6e8;
    --ts-flux-heat: #c62828;
    --ts-flux-cool: #1565c0;
    --ts-flux-electric: #f9a825;
    --ts-flux-neutral: #9e9e9e;
}
.thermal-system-viz-stack {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.thermal-system-viz-title {
    margin: 0 0 0.25rem;
    font-size: 0.95rem;
}
/* Compact (zijbalk): meerdere momentopnames (winter / voorjaar / zomer) */
.thermal-system-compact-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.thermal-system-compact-snapshot {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.thermal-system-compact-wrap {
    position: relative;
    width: 100%;
    height: var(--output-viz-plot-height);
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.thermal-system-compact-svg {
    width: 100%;
    height: 100%;
    display: block;
}
.thermal-system-compact-caption {
    font-size: 0.72rem;
    color: #78909c;
}
/* In fullscreen: compacte momentopnames verbergen — de animatie-scène vervangt die */
.thermal-system-fullscreen-wrapper.fullscreen-in-window .thermal-system-compact-list,
.thermal-system-fullscreen-wrapper.fullscreen-in-window .thermal-system-compact-wrap,
.thermal-system-fullscreen-wrapper.fullscreen-in-window .thermal-system-compact-caption {
    display: none;
}
.thermal-system-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.75rem;
}
.thermal-system-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.ts-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
}
.ts-swatch--heat { background: var(--ts-flux-heat); }
.ts-swatch--cool { background: var(--ts-flux-cool); }
.ts-swatch--electric { background: var(--ts-flux-electric); }
/* Fullscreen-layout en animatiebediening alleen tonen in fullscreen-modus. */
.thermal-system-fullscreen-wrapper .thermal-system-fullscreen-layout,
.thermal-system-fullscreen-wrapper .thermal-system-anim-controls,
.thermal-system-fullscreen-wrapper .thermal-system-occupancy-row {
    display: none;
}
.thermal-system-fullscreen-wrapper.fullscreen-in-window .thermal-system-fullscreen-layout {
    display: flex;
    flex-direction: column;
    margin-top: 0.35rem;
    flex: 1 1 auto;
    min-height: 0;
    max-height: min(78vh, calc(100vh - var(--header-height, 0px) - 9rem));
}
.thermal-system-scene-wrap {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    min-height: 0;
    overflow: hidden;
}
.thermal-system-scene-svg {
    width: 100%;
    height: auto;
    max-width: 78rem;
    max-height: min(58vh, calc(100vh - var(--header-height, 0px) - 14rem));
}
.thermal-system-fullscreen-wrapper.fullscreen-in-window .thermal-system-scene-wrap {
    min-height: min(74vh, calc(100vh - var(--header-height, 0px) - 10rem));
}
.thermal-system-fullscreen-wrapper.fullscreen-in-window .thermal-system-scene-svg {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
}
.thermal-system-fullscreen-wrapper.fullscreen-in-window .thermal-system-anim-controls {
    display: flex;
}
/* Bezetting boven de tijdsbalk: aantal personen bij dagstart en bij elke wijziging */
.thermal-system-fullscreen-wrapper.fullscreen-in-window .thermal-system-occupancy-row {
    display: block;
    position: relative;
    height: 0.95rem;
    margin-top: 0.3rem;
}
.ts-occ-mark {
    position: absolute;
    transform: translateX(-50%);
    font-size: 0.68rem;
    color: #9e9e9e;
    white-space: nowrap;
    line-height: 1;
}
.ts-occ-unit {
    position: absolute;
    right: 0;
    font-size: 0.68rem;
    color: #9e9e9e;
    line-height: 1;
}
/* Stromingsanimatie: streepjes schuiven in de pijlrichting (negatieve dashoffset = naar de pijlpunt).
   -72 is een gemeenschappelijk veelvoud van de dash-periodes 8 (elektrisch '5 3') en 9 (warmte/koude '6 3'),
   zodat de loop voor beide naadloos is. */
.ts-flow-line {
    animation: ts-flow-dash 4.5s linear infinite;
}
@keyframes ts-flow-dash {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -72; }
}
@media (prefers-reduced-motion: reduce) {
    .ts-flow-line { animation: none; }
}
.ts-panel-title {
    font-weight: 600;
    font-size: 0.8rem;
    margin-bottom: 0.35rem;
}
.ts-panel-subtitle {
    font-size: 0.72rem;
    color: #666;
    margin-bottom: 0.25rem;
}
.ts-panel-row {
    font-size: 0.78rem;
    margin: 0.15rem 0;
}
.ts-rh-row { font-variant-numeric: tabular-nums; }
.ts-rh-sub { font-size: 0.72rem; color: #666; }
.ts-zone-rh-row,
.ts-kv-row { display: flex; justify-content: space-between; gap: 0.5rem; }
.ts-zone-head { border-bottom: 1px solid #e0e0e0; padding-bottom: 0.15rem; color: #666; font-size: 0.72rem; }
.ts-zone-label { color: #444; }
.ts-zone-rh { font-variant-numeric: tabular-nums; font-weight: 500; }
.ts-flux-heat { color: var(--ts-flux-heat); }
.ts-flux-cool { color: var(--ts-flux-cool); }
.ts-flux-electric { color: var(--ts-flux-electric); }
.thermal-system-anim-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.8rem;
}
.thermal-system-season-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    flex: 1 1 100%;
    width: 100%;
}
.thermal-system-mode-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.ts-season-btn {
    padding: 0.2rem 0.55rem;
    font-size: 0.75rem;
    border: 1px solid #ccc;
    background: #f5f5f5;
    cursor: pointer;
}
.ts-season-btn--active {
    background: #e8f5e9;
    border-color: #2e7d32;
}
.thermal-system-scrubber {
    flex: 1;
    min-width: 120px;
}
.ts-mode-btn {
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    border: 1px solid #ccc;
    background: #f5f5f5;
    cursor: pointer;
}
.ts-mode-btn--active {
    background: #e3f2fd;
    border-color: #1565c0;
}
.ts-play-btn {
    padding: 0.2rem 0.6rem;
    cursor: pointer;
}
.thermal-system-sim-clock {
    font-variant-numeric: tabular-nums;
    min-width: 8rem;
}
.fullscreen-container.thermal-system-fullscreen-wrapper.fullscreen-in-window {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 0.65rem;
}
.fullscreen-container.thermal-system-fullscreen-wrapper.fullscreen-in-window .thermal-system-viz-stack {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.fullscreen-container.thermal-system-fullscreen-wrapper.fullscreen-in-window .thermal-system-viz-title,
.fullscreen-container.thermal-system-fullscreen-wrapper.fullscreen-in-window .thermal-system-legend {
    flex-shrink: 0;
}
.thermal-system-fullscreen-wrapper.fullscreen-in-window .thermal-system-occupancy-row {
    flex-shrink: 0;
}
.thermal-system-fullscreen-wrapper.fullscreen-in-window .thermal-system-anim-controls {
    flex-shrink: 0;
    margin-top: 0.35rem;
}