/* login.css kent (in tegenstelling tot het echte dashboard z'n style.css) geen oranje/rode
           accentkleur - die worden hier aangevuld zodat de Zon/Auto/Batterij-grafieken kloppen. */
        :root { --accent-orange: #f59e0b; --accent-red: #ef4444; --accent-purple: #a855f7; }
        body { display: block; height: auto; min-height: 100vh; padding: 20px; align-items: stretch; }
        .guest-wrap { max-width: 800px; margin: 0 auto; }
        .guest-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }
        .guest-header h1 { font-size: 20px; margin: 0; }
        .guest-header a.back-link { color: var(--text-muted); font-size: 13px; text-decoration: none; border: 1px solid var(--border-color); padding: 8px 14px; border-radius: 8px; }
        .guest-header a.back-link:hover { color: var(--text-main); }
        /* Geen losse "tegels": één doorlopende, dichte gegevenslijst per onderwerp, elk in een sober
           kader - bedoeld om in één oogopslag te scannen i.p.v. los te klikken tegels/popups. */
        .guest-sections { display: flex; flex-direction: column; gap: 14px; }
        .guest-section { border: 1px solid var(--border-color); border-radius: 10px; padding: 14px 18px 16px 18px; background: var(--card-bg); }
        .guest-section h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin: 0 0 10px 0; padding-bottom: 8px; border-bottom: 1px solid var(--border-color); }
        .guest-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)); gap: 4px 16px; margin-bottom: 12px; }
        .guest-stat-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.2px; }
        .guest-stat-val { font-size: 14px; font-weight: 700; color: var(--text-main); margin-bottom: 6px; }
        .guest-subhead { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; margin: 10px 0 6px 0; }
        .guest-chart-title { font-size: 10px; color: var(--text-muted); margin: 10px 0 6px 0; text-transform: uppercase; letter-spacing: 0.3px; }
        /* Staafjes en datumlabels staan in twee losse rijen (i.p.v. het label IN elke kolom naast
           de staaf te zetten) - anders concurreren staaf en label om dezelfde vaste kolomhoogte en
           krijgt elke kolom een andere resterende hoogte naargelang zijn label wel/niet leeg is,
           met ongelijke staaf-basislijnen en te hoog uitschietende staven tot gevolg. */
        .guest-mini-row { display: flex; align-items: flex-end; gap: 3px; height: 56px; border-bottom: 1px solid var(--border-color); }
        .guest-mini-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
        .guest-mini-bar-wrap { width: 100%; max-width: 18px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
        .guest-mini-labels { display: flex; gap: 3px; margin-top: 4px; }
        .guest-mini-day { flex: 1; min-width: 0; text-align: center; font-size: 8px; color: var(--text-muted); white-space: nowrap; overflow: hidden; }
        .guest-legend { display: flex; gap: 14px; font-size: 11px; color: var(--text-muted); margin-top: 6px; flex-wrap: wrap; }
        .guest-daylist { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 4px 16px; }
        .guest-updated { text-align: center; font-size: 11px; color: var(--text-muted); margin-top: 16px; }
        /* Donuts, lijndiagram en fase-gauges - dezelfde visuele taal als de popups in het echte
           dashboard, hier hergebruikt zodat de gastweergave niet louter tekst is. */
        .guest-top-row { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 4px; }
        .guest-donuts { display: flex; gap: 16px; flex-wrap: wrap; }
        .guest-donut-box { display: flex; flex-direction: column; align-items: center; gap: 8px; }
        .guest-donut { width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .guest-donut-inner { width: 66px; height: 66px; border-radius: 50%; background: var(--card-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 4px; }
        .guest-donut-inner span.val { font-size: 15px; font-weight: 700; color: var(--text-main); }
        .guest-donut-inner span.lbl { font-size: 8px; color: var(--text-muted); font-weight: 500; max-width: 100%; white-space: normal; line-height: 1.15; word-break: break-word; }
        .guest-donut-caption { font-size: 10px; color: var(--text-muted); text-align: center; max-width: 100px; }
        .guest-stats-flex { flex: 1; min-width: 260px; }
        .guest-phases { display: flex; gap: 16px; height: 90px; margin: 6px 0 4px 0; }
        .guest-phase { flex: 1; max-width: 60px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; }
        .guest-phase-val { font-size: 11px; font-weight: 700; color: var(--text-main); }
        .guest-phase-bar-wrap { width: 100%; background: var(--border-color); border-radius: 6px; height: 100%; position: relative; overflow: hidden; }
        .guest-phase-bar-fill { position: absolute; bottom: 0; left: 0; width: 100%; }
        .guest-phase-label { font-size: 10px; color: var(--text-muted); font-weight: 700; }
        .guest-line-wrap { position: relative; width: 100%; height: 60px; }
        .guest-line-dot { position: absolute; width: 8px; height: 8px; margin-left: -4px; margin-top: -4px; border-radius: 50%; }
        .guest-line-labels { position: relative; height: 14px; margin-top: 2px; }
        .guest-intro { font-size: 11px; color: var(--text-muted); line-height: 1.4; margin: -4px 0 12px 0; max-width: 800px; }
        .guest-flow-wrap { position: relative; width: 100%; max-width: 620px; aspect-ratio: 3 / 2; margin: 16px auto 28px auto; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
        .guest-donut-legend { display: flex; flex-direction: column; gap: 3px; font-size: 10px; color: var(--text-muted); text-align: left; }
        .guest-donut-legend span { display: flex; align-items: center; gap: 5px; }
        .guest-donut-legend .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

        /* Animaties: donuts, staafjes en lijnen starten "verborgen"/plat en onthullen zichzelf
           zodra hun sectie in beeld scrolt (IntersectionObserver in guest.js zet/haalt dan
           .in-view op de omringende .guest-section). Verlaat de sectie het beeld volledig, dan
           gaat .in-view er weer af en spelen de animaties opnieuw bij terugscrollen. Een
           periodieke data-verversing binnen een reeds-zichtbare sectie zet gewoon meteen de
           eindstand neer (geen her-animatie). */
        .guest-donut-box { opacity: 0; transform: scale(0.7); transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
        .guest-section.in-view .guest-donut-box { opacity: 1; transform: scale(1); }
        .guest-donuts .guest-donut-box:nth-child(1) { transition-delay: 0s; }
        .guest-donuts .guest-donut-box:nth-child(2) { transition-delay: 0.08s; }
        .guest-donuts .guest-donut-box:nth-child(3) { transition-delay: 0.16s; }
        .guest-donuts .guest-donut-box:nth-child(4) { transition-delay: 0.24s; }
        .guest-donuts .guest-donut-box:nth-child(5) { transition-delay: 0.32s; }
        .guest-donuts .guest-donut-box:nth-child(6) { transition-delay: 0.4s; }

        /* Donut-/ring-boog die van 0 naar zijn waarde "vult". De conic-gradient in guest.js gebruikt
           var(--arc); die interpoleert alleen vloeiend als hij als <percentage> is geregistreerd via
           @property. Browsers zonder @property-ondersteuning springen gewoon direct naar de eindwaarde
           (zoals voorheen) - de gradient blijft geldig want --arc heeft altijd een waarde. */
        @property --arc { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
        .g-arc { --arc: 0%; transition: --arc 0.9s cubic-bezier(0.4, 0, 0.2, 1); }
        .guest-section.in-view .g-arc { --arc: var(--arc-to, 0%); }
        .guest-donuts .guest-donut-box:nth-child(1) .g-arc { transition-delay: 0s; }
        .guest-donuts .guest-donut-box:nth-child(2) .g-arc { transition-delay: 0.08s; }
        .guest-donuts .guest-donut-box:nth-child(3) .g-arc { transition-delay: 0.16s; }
        .guest-donuts .guest-donut-box:nth-child(4) .g-arc { transition-delay: 0.24s; }
        .guest-donuts .guest-donut-box:nth-child(5) .g-arc { transition-delay: 0.32s; }
        .guest-donuts .guest-donut-box:nth-child(6) .g-arc { transition-delay: 0.4s; }

        .guest-bar-fill, .guest-phase-bar-fill { height: 0; transition: height 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
        .guest-section.in-view .guest-bar-fill, .guest-section.in-view .guest-phase-bar-fill { height: var(--h, 0%); }
        /* --i (op de kolom gezet, geerfd door het staafje erin) geeft elke staaf van een 30-dagen
           grafiek een oplopende vertraging, i.p.v. 30 losse :nth-child-regels te moeten schrijven. */
        .guest-mini-col .guest-bar-fill { transition-delay: calc(var(--i, 0) * 12ms); }
        .guest-phase:nth-child(1) .guest-phase-bar-fill { transition-delay: 0s; }
        .guest-phase:nth-child(2) .guest-phase-bar-fill { transition-delay: 0.1s; }
        .guest-phase:nth-child(3) .guest-phase-bar-fill { transition-delay: 0.2s; }

        .guest-line-dot { opacity: 0; transition: opacity 0.4s ease-out; }
        .guest-section.in-view .guest-line-dot { opacity: 1; }

        /* Kleuraccent + rond icoon per sectie, voor een meer visuele "infographic"-uitstraling i.p.v.
           uniforme grijze kaders. */
        .guest-section { border-left: 4px solid var(--section-color, var(--border-color)); }
        #section-zon { --section-color: var(--accent-orange); }
        #section-net { --section-color: var(--accent-blue); }
        #section-auto { --section-color: var(--accent-red); }
        #section-batterij { --section-color: var(--accent-green); }
        #section-flows { --section-color: var(--accent-purple); }
        #section-zelf { --section-color: var(--accent-orange); }
        .guest-section h2 { display: flex; align-items: center; gap: 10px; }
        .guest-section-icon { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: color-mix(in srgb, var(--section-color) 16%, transparent); }
        .guest-section-icon svg { width: 15px; height: 15px; stroke: var(--section-color); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

        /* Icoon-badges: eerst een korte "pop-in" op het moment dat de sectie in beeld komt (zelfde
           moment als de donuts/staafjes hierboven), daarna een subtiele doorlopende animatie die bij
           het onderwerp past - de vertraging van 0,5s zorgt dat de pop-in eerst afspeelt voordat de
           doorlopende animatie het overneemt. */
        .guest-section-icon svg { opacity: 0; transform: scale(0.4) rotate(-30deg); transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: 50% 50%; }
        .guest-section.in-view .guest-section-icon svg { opacity: 1; transform: scale(1) rotate(0deg); }
        #section-zon.in-view .guest-section-icon svg { animation: guest-icon-spin 14s linear infinite; animation-delay: 0.5s; }
        #section-net.in-view .guest-section-icon svg, #section-flows.in-view .guest-section-icon svg { animation: guest-icon-zap 1.8s ease-in-out infinite; animation-delay: 0.5s; }
        #section-auto.in-view .guest-section-icon svg { animation: guest-icon-wiggle 2.6s ease-in-out infinite; animation-delay: 0.5s; }
        #section-batterij.in-view .guest-section-icon svg { animation: guest-icon-pulse 2.2s ease-in-out infinite; animation-delay: 0.5s; }
        #section-zelf.in-view .guest-section-icon svg { animation: guest-icon-spin-reverse 9s linear infinite; animation-delay: 0.5s; }
        @keyframes guest-icon-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        @keyframes guest-icon-spin-reverse { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
        @keyframes guest-icon-zap { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
        @keyframes guest-icon-wiggle { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
        @keyframes guest-icon-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

        /* Horizontale balken - eenrichting (0..max) en dubbelrichting (uitwijkend vanaf een
           middenlijn, voor vermogens die zowel kunnen laden/afnemen als ontladen/terugleveren). */
        .guest-hbar-group { margin: 8px 0 18px 0; }
        .guest-hbar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
        .guest-hbar-row:last-child { margin-bottom: 0; }
        .guest-hbar-label { width: 130px; flex-shrink: 0; font-size: 11px; color: var(--text-muted); }
        .guest-hbar-track, .guest-hbar-track-bi { flex: 1; height: 12px; background: var(--border-color); border-radius: 6px; position: relative; overflow: hidden; }
        .guest-hbar-fill { position: absolute; top: 0; left: 0; height: 100%; border-radius: 6px; width: 0; transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
        .guest-section.in-view .guest-hbar-fill { width: var(--w, 0%); }
        .guest-hbar-center { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--card-bg); z-index: 2; }
        .guest-hbar-fill-bi { position: absolute; top: 0; left: 50%; height: 100%; border-radius: 6px; width: 0; transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1), left 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
        .guest-section.in-view .guest-hbar-fill-bi { width: var(--w, 0%); left: var(--l, 50%); }
        .guest-hbar-val { width: 84px; flex-shrink: 0; text-align: right; font-size: 12px; font-weight: 700; color: var(--text-main); }
        .guest-hbar-scale { display: flex; justify-content: space-between; font-size: 9px; color: var(--text-muted); margin: -4px 0 8px 140px; }

        /* Zon: omvormer-visualisatie, overgezet van de Zon-popup van het hoofddashboard.
           Micro-raster met een dynamische prestatiekleur (gedempt rood -> amber -> gedempt
           groen, van de laagste tot de hoogste waarde van dit moment; beste micro krijgt een
           groene ring), een radio-toggle tussen huidig vermogen en totaal opgewekt per paneel,
           de Solax als twee MPPT-string-balken en een levenslange-opwek-balk. De cellen zetten
           hun details in een title= zodat initGuestTooltips ze ook op de telefoon toont. */
        #zon-inverters { margin-top: 16px; }
        .guest-inv-toggle { display: flex; gap: 4px; margin: 6px 0 12px; padding: 3px; background: var(--border-color); border-radius: 9px; }
        .guest-inv-toggle button {
            flex: 1; border: none; background: transparent; color: var(--text-muted); font: inherit;
            font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
            padding: 7px 6px; border-radius: 7px; cursor: pointer; -webkit-appearance: none; appearance: none;
            transition: background 0.15s ease, color 0.15s ease;
        }
        .guest-inv-toggle button.active { background: var(--card-bg); color: var(--text-main); box-shadow: 0 1px 3px rgba(0,0,0,0.14); }
        /* Op smalle schermen 6 op een rij, op brede schermen zoveel als passen maar met een harde
           bovengrens (52px) zodat de cellen niet uitgroeien tot grote vlakken. */
        .guest-inv-array {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 52px));
            justify-content: start; gap: 5px; margin: 4px 0 8px 0;
        }
        @media (max-width: 460px) { .guest-inv-array { grid-template-columns: repeat(6, 1fr); } }
        .guest-inv-cell {
            aspect-ratio: 1 / 1; border-radius: 6px; border: 1px solid var(--border-color);
            display: flex; align-items: center; justify-content: center;
            font-size: 11px; font-weight: 700; color: var(--text-main);
            position: relative; cursor: pointer; text-shadow: 0 1px 3px rgba(0,0,0,0.5);
        }
        .guest-inv-cell-best { border-color: transparent; box-shadow: 0 0 0 2px hsl(140,42%,42%), 0 0 5px hsla(140,42%,42%,0.45); font-weight: 800; }
        .guest-inv-cell-dead { color: var(--text-muted); font-weight: 600; text-shadow: none; }
        .guest-inv-cell-dead::after { content: ''; position: absolute; inset: 0; border-radius: 6px; border: 1.5px solid var(--accent-red); opacity: 0.6; }
        .guest-inv-spread { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-muted); margin: 2px 2px 6px; }
        .guest-inv-legend { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--text-muted); margin: 2px 2px 14px; }
        .guest-inv-legend i { flex: 1; height: 6px; border-radius: 3px; background: linear-gradient(90deg, hsl(8,52%,50%), hsl(42,52%,51%), hsl(138,34%,43%)); }
        .guest-inv-strings { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 14px; }
        .guest-inv-string-row { display: flex; align-items: center; gap: 10px; }
        .guest-inv-string-label { font-size: 11px; color: var(--text-muted); width: 58px; flex-shrink: 0; }
        .guest-inv-string-track { flex: 1; height: 12px; background: var(--border-color); border-radius: 6px; overflow: hidden; }
        .guest-inv-string-fill { height: 100%; background: var(--accent-orange); border-radius: 6px; }
        .guest-inv-string-val { font-size: 11px; font-weight: 700; color: var(--text-main); width: 52px; text-align: right; flex-shrink: 0; }
        .guest-inv-solax-stats { display: flex; gap: 18px; flex-wrap: wrap; font-size: 11px; color: var(--text-muted); margin: 2px 0 10px; }
        .guest-inv-solax-stats b { color: var(--text-main); font-weight: 700; }
        .guest-inv-stack { display: flex; height: 20px; border-radius: 10px; overflow: hidden; background: var(--border-color); }
        .guest-inv-stack > div { height: 100%; }

        /* Statusbadge voor GridReward - alleen actief/niet-actief en welk apparaat, bewust geen
           bedragen (zie ook de eerdere keuze om financiele gegevens uit de gastweergave te laten). */
        .guest-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 999px; margin: 2px 0 14px 0; }
        .guest-badge svg { width: 12px; height: 12px; flex-shrink: 0; }
        .guest-badge.active { background: color-mix(in srgb, var(--accent-green) 16%, transparent); color: var(--accent-green); }
        .guest-badge.inactive { background: var(--border-color); color: var(--text-muted); }

        /* Kalender-heatmap per onderdeel (100 dagen) - zelfde idee als GitHub's contributiegrafiek:
           een vakje per dag, uitgelijnd op weekdag (maandag bovenaan), kleurintensiteit naar
           dagwaarde. Bewust een langere periode dan de staafjes/lijnen hierboven, die bij 100 losse
           staven te druk zouden worden om nog af te lezen - een heatmap blijft dat wel, juist omdat
           elk vakje geen eigen as/label nodig heeft. */
        .guest-heatmap-wrap { display: flex; gap: 6px; align-items: flex-start; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
        .guest-heatmap-daylabels { display: grid; grid-template-rows: repeat(7, 11px); gap: 3px; flex-shrink: 0; }
        .guest-heatmap-daylabels span { font-size: 8px; color: var(--text-muted); line-height: 11px; }
        .guest-heatmap-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 11px); grid-auto-columns: 11px; gap: 3px; flex-shrink: 0; }
        .guest-heatmap-cell { width: 11px; height: 11px; border-radius: 2px; background: var(--border-color); }
        .guest-heatmap-cell.empty { background: transparent; }
        /* Op smalle schermen kleinere vakjes, zodat de volle 100-dagen heatmap in één keer past i.p.v.
           te moeten horizontaal scrollen om de rest te zien. */
        @media (max-width: 480px) {
            body { padding: 12px; }
            .guest-heatmap-daylabels { grid-template-rows: repeat(7, 8px); gap: 2px; }
            .guest-heatmap-daylabels span { line-height: 8px; font-size: 7px; }
            .guest-heatmap-grid { grid-template-rows: repeat(7, 8px); grid-auto-columns: 8px; gap: 2px; }
            .guest-heatmap-cell { width: 8px; height: 8px; }
        }

        /* Rapportknop + modal om te kiezen welke hoofdonderwerpen in de PDF komen. De PDF zelf wordt
           niet server-side opgebouwd (geen PDF-library op deze NAS) maar via de "Opslaan als PDF"-optie
           van de browser's eigen printdialoog - vandaar de uitgebreide @media print hieronder die er
           een nette, papierklare bladopmaak van maakt i.p.v. gewoon de website af te drukken. */
        /* Eigen, herkenbaar geaccentueerde knop i.p.v. de neutrale .back-link-stijl te hergebruiken op
           een <button> - dat botste met de browser's eigen knop-chrome (native schaduw/gradient die
           background/border niet overschrijven) en met tekstuitlijning van het icoon. */
        /* Vernieuwknop bovenin: draait terwijl guestRefresh() data ophaalt (guest.js). */
        #guest-refresh-btn svg { transition: transform 0.2s ease-out; }
        #guest-refresh-btn:hover svg { transform: rotate(-30deg); }
        #guest-refresh-btn.guest-refresh-spin svg { animation: guest-refresh-spin 0.8s linear infinite; }
        @keyframes guest-refresh-spin { to { transform: rotate(360deg); } }

        .guest-report-trigger { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-blue); color: #fff; border: none; font: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 8px; cursor: pointer; -webkit-appearance: none; appearance: none; }
        .guest-report-trigger svg { width: 13px; height: 13px; flex-shrink: 0; }
        .guest-report-trigger:hover { background: color-mix(in srgb, var(--accent-blue) 85%, black); }
        .guest-report-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 2000; align-items: center; justify-content: center; padding: 20px; }
        .guest-report-overlay.open { display: flex; }
        .guest-report-modal { background: var(--card-bg); border-radius: 14px; padding: 22px 24px; max-width: 340px; width: 100%; box-shadow: 0 12px 40px rgba(0,0,0,0.35); }
        .guest-report-modal h3 { margin: 0 0 6px 0; font-size: 15px; color: var(--text-main); }
        .guest-report-hint { font-size: 11px; color: var(--text-muted); margin: 0 0 14px 0; line-height: 1.4; }
        .guest-report-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
        .guest-report-options label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-main); cursor: pointer; }
        .guest-report-options input { width: 16px; height: 16px; accent-color: var(--accent-blue); cursor: pointer; flex-shrink: 0; }
        .guest-report-actions { display: flex; justify-content: flex-end; gap: 10px; }
        .guest-report-btn-secondary, .guest-report-btn-primary { border: none; border-radius: 8px; padding: 9px 16px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
        .guest-report-btn-secondary { background: var(--border-color); color: var(--text-main); }
        .guest-report-btn-primary { background: var(--accent-blue); color: #fff; }
        .guest-print-header { display: none; }

        /* Tik-callout: de mini-grafieken, gauges, lijnpuntjes, heatmap-cellen en de chips op het
           energieschema dragen hun uitleg in een `title`-attribuut. Op de laptop toont de browser
           dat vanzelf bij hover, maar een touchscreen kent geen hover - daar plaatst guest.js
           (initGuestTooltips) bij een tik deze zwevende bel met dezelfde tekst. */
        .guest-tooltip { position: fixed; z-index: 1800; max-width: min(260px, 80vw); padding: 7px 11px; border-radius: 10px; background: var(--card-bg); color: var(--text-main); border: 1px solid var(--border-color); font-size: 11px; font-weight: 600; line-height: 1.35; text-align: center; box-shadow: 0 6px 22px rgba(0,0,0,0.3); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity 0.15s ease-out, transform 0.15s ease-out; }
        .guest-tooltip.show { opacity: 1; transform: translateY(0); }

        @media print {
            /* Forceer een lichte, papierklare weergave, ongeacht het actieve thema van de bezoeker. */
            :root, [data-theme="dark"] { --bg-color: #ffffff; --card-bg: #ffffff; --text-main: #111827; --text-muted: #4b5563; --border-color: #d1d5db; }
            body { padding: 0; }
            .guest-header, .guest-report-overlay, .guest-updated, .guest-tooltip { display: none !important; }
            .guest-print-header { display: block; margin: 0 0 18px 0; }
            .guest-print-header h1 { font-size: 18px; margin: 0 0 2px 0; }
            .guest-print-meta { font-size: 11px; color: var(--text-muted); }
            .guest-wrap { max-width: 100%; }
            .guest-sections { gap: 10px; }
            .guest-section { break-inside: avoid; page-break-inside: avoid; box-shadow: none; border: 1px solid var(--border-color); }
            .guest-section.guest-report-hidden { display: none !important; }
            .guest-heatmap-wrap { overflow: visible !important; }
            /* Staat de bezoeker in de "naast elkaar"-weergave (carrousel of deck), dan toch alle
               kaarten volledig en onder elkaar afdrukken i.p.v. alleen de zichtbare. */
            .guest-sections.guest-cards, .guest-sections.guest-deck { position: static !important; flex-direction: column !important; height: auto !important; overflow: visible !important; }
            .guest-sections.guest-cards .guest-section, .guest-sections.guest-deck .guest-section { position: static !important; flex: none !important; top: auto !important; left: auto !important; width: auto !important; height: auto !important; overflow: visible !important; }
            .guest-sections.guest-deck .guest-section > * { display: revert !important; }
            .guest-sections.guest-deck .guest-section h2 { margin: 0 0 10px 0 !important; border-bottom: 1px solid var(--border-color) !important; padding-bottom: 8px !important; }
            /* Alle animaties/tussentoestanden overslaan en meteen de eindstand tonen - anders staan
               secties die de bezoeker nooit heeft "gescrold" (en dus nooit hun .in-view kregen) leeg
               of plat op de afdruk. */
            * { animation: none !important; transition: none !important; }
            .guest-donut-box, .guest-section-icon svg, .guest-line-dot { opacity: 1 !important; transform: none !important; }
            .g-arc { --arc: var(--arc-to, 0%) !important; }
            .guest-bar-fill, .guest-phase-bar-fill { height: var(--h, 0%) !important; }
            .guest-hbar-fill { width: var(--w, 0%) !important; }
            .guest-hbar-fill-bi { width: var(--w, 0%) !important; left: var(--l, 50%) !important; }
            .guest-line-path { stroke-dashoffset: 0 !important; stroke-dasharray: none !important; }
            * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; }
        }

        /* Weergave-schakelaar boven de kaarten. Twee standen (zie initGuestViewToggle in guest.js):
           "onder elkaar" (standaard, de doorlopende verticale lijst) en "naast elkaar" (een
           horizontale kaart-carrousel met scroll-snap: op een smal scherm swipe je per kaart van
           thema naar thema, op een breder scherm staan er twee naast elkaar). De keuze wordt in
           localStorage onthouden. Zelfde segmented-control-vormgeving als .guest-inv-toggle. */
        .guest-view-toggle { display: flex; gap: 4px; margin: 0 0 14px; padding: 3px; background: var(--border-color); border-radius: 9px; }
        .guest-view-toggle button {
            flex: 1; border: none; background: transparent; color: var(--text-muted); font: inherit;
            font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
            padding: 7px 6px; border-radius: 7px; cursor: pointer; -webkit-appearance: none; appearance: none;
            display: inline-flex; align-items: center; justify-content: center; gap: 6px;
            transition: background 0.15s ease, color 0.15s ease;
        }
        .guest-view-toggle button svg { width: 13px; height: 13px; flex-shrink: 0; }
        .guest-view-toggle button.active { background: var(--card-bg); color: var(--text-main); box-shadow: 0 1px 3px rgba(0,0,0,0.14); }

        /* "Naast elkaar" op TOUCH-apparaten (telefoon/tablet/touchscreen): een horizontale
           kaart-carrousel met scroll-snap. Elke kaart is bijna schermbreed (met een sliver van de
           volgende in beeld als swipe-hint), heeft een eigen verticale scroll voor de langere
           inhoud, en de strook heeft een vaste hoogte zodat het swipen de rest van de pagina niet
           laat verspringen. updateGuestCardsInView() zet .in-view op de zichtbare kaarten. */
        .guest-sections.guest-cards {
            flex-direction: row;
            height: min(72vh, 640px);
            overflow-x: auto;
            overflow-y: hidden;
            scroll-snap-type: x mandatory;
            overscroll-behavior-x: contain;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 4px;
        }
        .guest-sections.guest-cards .guest-section {
            flex: 0 0 min(85vw, 380px);
            height: 100%;
            overflow-y: auto;
            scroll-snap-align: start;
            scroll-snap-stop: always;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
        }

        /* "Naast elkaar" op alle OVERIGE (bredere, niet-touch) schermen: de kaarten liggen als een
           stok kaarten horizontaal achter elkaar. guest.js (layoutStack) zet per kaart de
           left-offset, breedte en hoogte; van elke niet-actieve kaart steekt alleen de gekleurde
           rand met de titelbalk uit - die hele strook is aanklikbaar en haalt de kaart bovenop,
           waar hij zich volledig toont en zijn animaties opnieuw speelt. */
        .guest-sections.guest-deck { position: relative; --stack-peek: 52px; }
        .guest-sections.guest-deck .guest-section {
            position: absolute; top: 0; left: 0; margin: 0;
            box-shadow: 4px 0 14px rgba(0,0,0,0.14); overflow: hidden;
            transition: left 0.42s cubic-bezier(0.4, 0, 0.2, 1), width 0.42s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .guest-sections.guest-deck .guest-section:not(.stack-active) { cursor: pointer; border-left-width: 6px; }
        .guest-sections.guest-deck .guest-section:not(.stack-active) > *:not(h2) { display: none; }
        .guest-sections.guest-deck .guest-section:not(.stack-active) h2 { margin-bottom: 0; border-bottom: none; padding-bottom: 0; white-space: nowrap; }
        .guest-sections.guest-deck .guest-section:not(.stack-active):hover { filter: brightness(1.06); }
        .guest-sections.guest-deck .guest-section.stack-active { z-index: 100; }
        @media (prefers-reduced-motion: reduce) {
            .guest-sections.guest-deck .guest-section { transition: none; }
        }

        /* Maatwerk toast i.p.v. window.alert() — zelfde opzet als in style.css
           (die op zijn beurt overgenomen is van /web/younik), hier met de eigen
           kleurtokens van de guest-view (altijd het lichte thema). */
        #toast-container { position: fixed; top: 20px; right: 20px; z-index: 100000; display: flex; flex-direction: column; gap: 12px; max-width: calc(100vw - 32px); }
        .dash-toast { display: flex; align-items: center; background: var(--card-bg); color: var(--text-main); min-width: 260px; max-width: 380px; padding: 12px 16px 12px 14px; border-radius: 14px; box-shadow: var(--shadow), 0 10px 30px rgba(0,0,0,0.25); border: 1px solid var(--border-color); animation: dashToastIn 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) forwards; cursor: pointer; }
        .toast-icon-circle { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 14px; flex-shrink: 0; background: var(--bg-color); }
        .dash-toast.toast-success .toast-icon-circle { border: 2px solid var(--accent-green); color: var(--accent-green); box-shadow: 0 0 12px rgba(16,185,129,0.2); }
        .dash-toast.toast-error .toast-icon-circle { border: 2px solid var(--accent-red); color: var(--accent-red); box-shadow: 0 0 12px rgba(239,68,68,0.2); }
        .dash-toast.toast-info .toast-icon-circle { border: 2px solid var(--accent-blue); color: var(--accent-blue); box-shadow: 0 0 12px rgba(59,130,246,0.2); }
        .toast-content { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
        .toast-title { font-weight: 700; font-size: 0.9rem; color: var(--text-main); margin-bottom: 2px; }
        .toast-message { font-size: 0.78rem; color: var(--text-muted); font-weight: 500; line-height: 1.35; word-break: break-word; }
        @keyframes dashToastIn { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
        @keyframes dashToastOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(120%); opacity: 0; } }
        @media (max-width: 480px) {
            #toast-container { left: 12px; right: 12px; top: 12px; max-width: none; }
            .dash-toast { max-width: none; min-width: 0; width: 100%; }
        }