/* =====================================================================
   BeterEPC — rapport-print.css
   Printstijl voor rapport.html. Twee wegen leiden hierheen:
     * de server drukt de pagina met headless Chrome naar pdf
       (GET /api/bestelling/<token>/pdf → rapport.html?bestelling=…&print=1,
       body krijgt dan class "print"),
     * de bezoeker drukt zelf af (Ctrl+P / "Bewaar als pdf").
   Wordt gelinkt met:  <link rel="stylesheet" media="print" href="/site/rapport-print.css">

   Het document (A4 staand):
     pagina 1   kop: merk beterEPC, "Renovatierapport", adres, datum, foto
                rechts (de bestaande .pandkop) · de renovatieplicht, volledig
                uitgeklapt · de scenario's (padenkaarten naast elkaar)
     pagina 2+  "Jouw plan per gevel, dak en installatie": de plan-kaart met
                de verfijnlaag van elke gekozen maatregel open; niet-gekozen
                maatregelen en elementen gedempt (niet verborgen)
     eigen pag. "Jouw plan stap voor stap": de cumulatieve doorrekening
     slot       de kleine letters
     elke pag.  voetregel (#print-voet: disclaimer links, publieke
                rapportlink rechts) en "pagina x van y" in de ondermarge.

   Techniek voetregel: <body> wordt in print een CSS-tabel en #print-voet
   een table-footer-group; Chrome herhaalt die onderaan elke pagina.
   position:fixed is bewust NIET gebruikt: Chrome tekent niets in de
   paginamarge en schuift wat over de rand valt door naar de volgende
   pagina, bovenop de inhoud.

   Alle regels staan in @media print zodat het bestand ook veilig is
   als het per ongeluk zonder media="print" gelinkt wordt.
   ===================================================================== */

@media print {

  /* ---------- pagina ---------- */
  @page {
    size: A4 portrait;
    margin: 14mm 13mm 17mm 13mm;
    /* paginanummer in de ondermarge (Chrome/Edge 131+; elders genegeerd) */
    @bottom-center {
      content: "pagina " counter(page) " van " counter(pages);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
      font-size: 8pt;
      color: #8A887F;
    }
  }

  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: none !important;
    animation: none !important;
  }

  html, body {
    background: #fff !important;
    color: #2C2C2A;
    overflow: visible !important;      /* body{overflow-x:hidden} knipt pagina's af */
    height: auto !important;
    min-height: 0 !important;
  }
  /* body wordt een tabel: zo kan #print-voet als tabelvoet op ELKE pagina
     herhaald worden zonder over de inhoud te vallen. */
  body {
    display: table !important;
    width: 100% !important;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 11.5px; line-height: 1.45;
  }
  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; }

  /* ---------- weg in print: navigatie, knoppen, bediening ---------- */
  nav, .nav-in, .laden, .fout,
  .acties, .knop, .deel, .v-laden, .kicker .scherm, #v-bewaard,
  button, input[type="range"], input[type="checkbox"], select,
  .pad button, .m-rij .verfijn, .verfijn, .pv-teller button,
  .zelf a, .schuif input, .m-rij input, .el input,
  .plicht summary {
    display: none !important;
  }
  .print-alleen { display: inline !important; }

  /* ---------- omhulsel ---------- */
  .wrap { max-width: none !important; width: auto !important; padding: 0 !important; margin: 0 !important; }

  h2.sectie { font-size: 17px; margin: 0 0 3px; break-after: avoid; page-break-after: avoid; }
  p.intro { font-size: 11.5px; margin-bottom: 4mm; max-width: none; break-after: avoid; page-break-after: avoid; }
  /* een kop begint nooit onderaan een pagina: kop + intro + begin van de
     inhoud blijven bijeen */
  .print-nieuwe-pagina { break-before: page; page-break-before: always; padding-top: 1mm; }

  /* ---------- 1. kop van het document: de pandkaart ---------- */
  .pandkop {
    grid-template-columns: 1fr 56mm !important;   /* tekst links, foto rechts */
    gap: 7mm !important;
    align-items: start !important;
    padding: 0 0 5mm !important;
    margin: 0 0 5mm !important;
    border: 0 !important;
    border-bottom: 1.5px solid #E6E4DD !important;
    border-radius: 0 !important;
    background: transparent !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  .pandkop img { grid-column: 2; grid-row: 1; border-radius: 3mm; align-self: center; }
  .pandkop img:not([src]), .pandkop img[src=""] { display: none !important; }   /* geen foto: geen leeg kader */
  .pandkop:not(:has(img[src])), .pandkop:has(img[src=""]) { grid-template-columns: 1fr !important; }   /* … en geen lege kolom rechts */
  .pandkop > div { grid-column: 1; grid-row: 1; }
  .print-merk { display: block !important; font-weight: 800; font-size: 21px; letter-spacing: -0.02em; color: #2C2C2A; line-height: 1.1; margin-bottom: 7mm; }
  .print-merk b { color: #00843D; }
  .kicker { font-size: 9.5px; letter-spacing: .14em; }
  .pandkop h1 { font-size: 23px; margin: 2px 0 4px; }
  .print-datum { display: block !important; font-size: 11px; color: #6E6C64; margin-bottom: 12px; }
  .labelrij { gap: 10px; }
  .labelrij .score { font-size: 12px; }
  .kerncijfers { font-size: 11px; margin-top: 9px; padding-top: 8px; gap: 14px; }

  /* ---------- renovatieplicht ---------- */
  .plicht {
    margin-bottom: 6mm !important;
    border-radius: 3mm !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  .plicht .kern { padding: 3mm 4mm 2mm; gap: 3mm; }
  .plicht .kern .mark svg { width: 24px; height: 24px; }
  .plicht .kern b { font-size: 14px; }
  .plicht .kern span { font-size: 11.5px; }
  .plicht details { border-top: 0 !important; }
  /* rapport.html zet details.open in de printmodus; is dat niet gebeurd
     (eigen afdruk), dan drukt Chrome 131+ de inhoud toch af */
  .plicht details::details-content { content-visibility: visible !important; display: block !important; }
  .plicht .meer { padding: 0 4mm 3mm 13mm; font-size: 11px; max-width: none; }
  .plicht .meer a::after { content: " (" attr(href) ")"; font-size: 10px; color: #8A887F; overflow-wrap: anywhere; }

  /* ---------- 2. de scenario's (padenkaarten) ---------- */
  .paden {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4mm !important;
    margin-bottom: 6mm !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  .paden.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-width: 130mm; }
  .paden.n1 { grid-template-columns: minmax(0, 1fr) !important; max-width: 70mm; }
  .pad {
    padding: 0 4mm 4mm !important;
    gap: 7px !important;
    border-radius: 4mm !important;
    transform: none !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  .pad::before { height: 4px; }
  .pad.actief { border-color: var(--accent, #00843D) !important; outline: 1.5px solid var(--accent, #00843D); outline-offset: -1px; }
  .pad .merk-rij { padding-top: 5mm; gap: 8px; }
  .pad .merk-rij .mark svg { width: 30px; height: 30px; }
  .pad .nr { font-size: 9.5px; letter-spacing: .06em; }
  .pad .kop { font-size: 14.5px; }
  .pad .uitleg { font-size: 11px; }
  .pad .werk { font-size: 10.5px; padding: 3px 8px 3px 6px; }
  .pad .prijs { font-size: 16px; padding-top: 8px; }
  .pad .prijs small { font-size: 10.5px; }
  .pad .winst { font-size: 11px; padding-top: 8px; gap: 7px; }
  .pad .epc-vlag { height: 20px; }
  .pad .epc-vlag em { font-size: 12px; }
  .pad .epc-vlag i { font-size: 10px; }

  /* ---------- 3. de plan-kaart ---------- */
  .kaart {
    border: 1px solid #E6E4DD !important;
    border-radius: 4mm !important;
    overflow: visible !important;
    /* géén break-inside: avoid op de hele kaart — die is meestal langer dan
       een pagina en Chrome zou ze dan eerst naar een nieuwe pagina schuiven
       (lege pagina) en tóch breken. De .m-blokken breken netjes. */
    break-inside: auto; page-break-inside: auto;
    /* elk paginadeel van de kaart krijgt zijn eigen volledige rand */
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
  .w-kop { padding: 3mm 4mm 2mm; break-after: avoid; page-break-after: avoid; }
  .w-kop b { font-size: 14px; }
  .w-kop small { font-size: 10px; }
  .schaal { height: 90px; margin: 3mm 4mm 0; break-inside: avoid; page-break-inside: avoid; break-after: avoid; page-break-after: avoid; }
  .balk { top: 36px; height: 22px; }
  .balk i.hier { transform: scale(1.1, 1.35); }
  .pin .bol { font-size: 11px; }
  .pin.doel { top: 62px; }
  .m-lijst { padding: 3mm 4mm 0 !important; gap: 5px !important; }

  /* maatregelrij: gekozen = normaal + ✓, niet gekozen = gedempt + – */
  .m { break-inside: avoid; page-break-inside: avoid; }
  .m-rij {
    background: #F8F7F3 !important;
    padding: 6px 10px 6px 7px !important;
    cursor: default;
    break-inside: avoid; page-break-inside: avoid;
  }
  .m-rij .tegel { width: 26px; height: 26px; }
  .m-rij .tegel svg { width: 15px; height: 15px; }
  .m-rij .naam { font-size: 12.5px; }
  .m-rij .pv-sub, .m-rij [data-sub] { display: block; font-size: 10.5px; color: #8A887F; }
  .m-rij .kost { font-size: 11px; }
  .m-rij .delta { font-size: 11px; }
  .m-rij::after {
    content: "✓";
    flex: none;
    width: 16px; height: 16px;
    border-radius: 999px;
    background: #00843D; color: #fff;
    font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
  }
  /* niet gekozen — via class .uit (door de UI gezet) óf via :has() */
  .m.uit .m-rij, .m-rij.uit { opacity: .45; }
  .m.uit .m-rij::after, .m-rij.uit::after { content: "–"; background: #D5D2C8; color: #2C2C2A; }
  .m.uit .laag, .m-rij.uit + .laag { display: none !important; }
  .m:has(.m-aan:not(:checked)) .m-rij { opacity: .45; }
  .m:has(.m-aan:not(:checked)) .m-rij::after { content: "–"; background: #D5D2C8; color: #2C2C2A; }
  .m:has(.m-aan:not(:checked)) .laag { display: none !important; }
  /* oude verfijner (rijen zonder .m-omhulsel) */
  #maatregelen > .m-rij:has(input:not(:checked)) { opacity: .45; }
  #maatregelen > .m-rij:has(input:not(:checked))::after { content: "–"; background: #D5D2C8; color: #2C2C2A; }

  /* verfijnlaag: altijd open in print (ongeacht .open) */
  .m .laag, .laag {
    display: block !important;
    background: #FCFBF8 !important;
    border: 1px solid #E6E4DD; border-top: 0;
    border-radius: 0 0 9px 9px;
    margin-top: -5px;
    padding: 9px 11px 10px 40px !important;
  }
  .m .m-rij { border-radius: 9px 9px 0 0 !important; }
  .m.uit .m-rij, .m:has(.m-aan:not(:checked)) .m-rij { border-radius: 9px !important; }
  .laag h5 { font-size: 9.5px; margin: 8px 0 4px; break-after: avoid; page-break-after: avoid; }
  .laag h5:first-child { margin-top: 0; }
  .els { gap: 3px; break-inside: avoid; page-break-inside: avoid; }

  /* element-rij: checkbox weg; eerste kolom = ✓ (gekozen) of – (niet),
     dan naam + gewichtsbalkje + puntenpil */
  .el {
    grid-template-columns: 14px 1fr 58px auto !important;
    gap: 8px !important;
    padding: 4px 9px !important;
    font-size: 11.5px !important;
    background: #fff !important;
    cursor: default;
    break-inside: avoid; page-break-inside: avoid;
  }
  .el::before { content: "✓"; color: #00843D; font-weight: 700; font-size: 11px; text-align: center; }
  .el .n small { font-size: 10.5px; }
  .el .bar { display: block !important; height: 4px; }
  .el .bar i { background: #00843D; }
  .el .pt { font-size: 10.5px; min-width: 38px; }
  .el.uit { opacity: .5; }
  .el.uit::before { content: "–"; color: #8A887F; }
  .el.uit .bar i { background: #D5D2C8; }
  .el.uit .pt { background: #F8F7F3; color: #8A887F; font-weight: 500; }
  .el:has(input:not(:checked)) { opacity: .5; }
  .el:has(input:not(:checked))::before { content: "–"; color: #8A887F; }
  .el:has(input:not(:checked)) .bar i { background: #D5D2C8; }
  .el:has(input:not(:checked)) .pt { background: #F8F7F3; color: #8A887F; font-weight: 500; }

  /* panelen per dakvlak: teller-knoppen weg, aantal als tekst */
  .el.pv { grid-template-columns: 14px 1fr auto auto !important; }
  .pv-teller { gap: 0; }
  .pv-teller::before { content: "panelen: "; color: #6E6C64; font-size: 11px; margin-right: 3px; }
  .pv-teller b { font-size: 11.5px; min-width: 0; }
  .el.pv.uit .pv-teller { opacity: 1; }

  /* keuze-chips in een laag: alleen de gekozen chip, als pil met vinkje */
  .laag .chips { gap: 5px; }
  .laag .chips .chip:not(.actief), .laag [data-keuze] .chip:not(.actief) { display: none !important; }
  .laag .chip.actief {
    display: inline-block !important;
    font-size: 11px; padding: 3px 10px;
    background: #E1F5EE !important; color: #085041 !important; border: 1px solid #00843D !important;
    cursor: default;
  }
  .laag .chip.actief::before { content: "✓ "; }

  /* ⚙ zelf invullen: alleen tonen als de koper het veld gebruikt heeft */
  .zelf { display: none !important; }
  .zelf.open { display: flex !important; margin-top: 5px; font-size: 11px; }
  .zelf.open::before { content: "eigen waarde:"; color: #8A887F; }
  .zelf.open .zelf-veld { display: inline-flex !important; gap: 4px; }
  .zelf input {
    display: inline-block !important;
    border: 0 !important; background: transparent !important;
    padding: 0 !important;
    width: auto !important; min-width: 0; max-width: 92px; field-sizing: content;
    font-weight: 600; font-size: 11px; color: #2C2C2A;
  }

  /* airco-blok: schuiver weg, de tekst ("60 % · 2 binnenunits") blijft */
  .extra { display: none !important; }
  .extra.open { display: block !important; margin-top: 5px; }
  .schuif { font-size: 11.5px; }
  .schuif b { font-weight: 600; }
  .noot { font-size: 10.5px; margin-top: 4px; }

  /* feiten + voetnoot onder de kaart */
  .w-feiten { padding: 3mm 4mm 1mm; font-size: 11.5px; gap: 12px; break-inside: avoid; page-break-inside: avoid; }
  .v-noot { font-size: 10.5px; padding: 4px 4mm 0; }
  .voetnoot { font-size: 10px; padding: 6px 4mm 3.5mm; }

  /* ---------- 4. jouw plan stap voor stap (eigen pagina) ---------- */
  #stappen { margin-top: 0 !important; }
  #stappen-kaart { break-inside: auto; page-break-inside: auto; }
  .stappen { padding: 3mm 4mm 0 !important; gap: 5px !important; }
  .stap {
    grid-template-columns: 26px 1fr auto 62px !important;
    gap: 10px !important;
    padding: 7px 10px 7px 8px !important;
    background: #F8F7F3 !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  .stap .nr { width: 26px; height: 26px; font-size: 12.5px; }
  .stap .wat b { font-size: 12.5px; }
  .stap .wat .det { font-size: 10.5px; }
  .stap .score .pijl { font-size: 11.5px; }
  .stap .score .pijl b { font-size: 15px; }
  .stap .score .dl { font-size: 10.5px; padding: 1px 8px; margin-top: 3px; }
  .stap .lab .epc-vlag { height: 20px; }
  .stap .lab .epc-vlag em { font-size: 12px; }
  .stap .lab .epc-vlag i { font-size: 10px; }
  .stap.totaal { background: #fff !important; border: 1.5px solid #00843D !important; }
  .stap.totaal .wat b { font-size: 13px; }
  .stap.totaal .score .pijl b { font-size: 17px; }
  #stappen .w-feiten { padding-top: 3mm; }

  /* ---------- kleine letters ---------- */
  .kleine-letters { font-size: 9.5px; margin-top: 6mm; padding: 4mm 0 0; max-width: none; break-inside: avoid; page-break-inside: avoid; }
  .kleine-letters a::after { content: " (" attr(href) ")"; overflow-wrap: anywhere; }

  /* ---------- 5. vaste voetregel op elke pagina ---------- */
  /* #print-voet is een direct kind van <body>; body is in print een tabel,
     dus deze voetgroep wordt door de browser onderaan elke pagina herhaald.
     De twee spans zweven links (tekst) en rechts (url) binnen de cel. */
  #print-voet {
    display: table-footer-group !important;
    border-top: 1px solid #E6E4DD;
    font-size: 8.5px;
    line-height: 1.3;
    color: #8A887F;
    break-inside: avoid; page-break-inside: avoid;   /* verplicht: zonder dit herhaalt Chrome de voet niet */
  }
  #print-voet > * { display: block !important; padding-top: 2mm; }
  #print-voet .tekst, #print-voet > :first-child { float: left; white-space: nowrap; max-width: 55%; }
  #print-voet .url, #print-voet > :last-child { float: right; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; max-width: 45%; }
  #print-voet .url:not(:empty)::before { content: "rapport: "; }
  #print-voet b, #print-voet strong { color: #2C2C2A; font-weight: 700; }
}

/* =====================================================================
   EISEN AAN DE HTML (rapport.html)
   ---------------------------------------------------------------------
   1. Link dit bestand in <head>, NÁ het eigen <style>-blok, met media="print".
   2. Voetregel: een DIRECT kind van <body> (niet in #inhoud of .wrap):
        <div id="print-voet" hidden>
          <span class="tekst">BeterEPC — simulatie volgens de EPC-rekenmethode, geen officieel EPC</span>
          <span class="url">https://beterepc.be/rapport.html?bestelling=…</span>
        </div>
      precies twee kinderen: eerste = tekst (links), laatste = url (rechts).
      .url = de publieke rapportlink (bij ?print=1 nooit location.href);
      bij de ?pand=-route leeg laten (dan verschijnt ook "rapport:" niet).
   3. Kop op pagina 1 = .pandkop met daarin (scherm: verborgen)
        <div class="print-merk">beter<b>EPC</b></div>
        <div class="kicker"><span class="scherm">Renovatieadvies</span><span class="print-alleen">Renovatierapport</span></div>
        <div class="print-datum" id="p-datum">Rapport van 7 september 2026 · …</div>
      en de foto (#p-foto) als eerste kind — die gaat in print naar rechts.
   4. Nieuwe pagina: class "print-nieuwe-pagina" op de <h2> van het plan
      en op die van de stappen-sectie.
   5. Toestand in klassen, niet alleen in checkbox-state (fallback zonder :has()):
        class "uit" op .m als zijn .m-aan niet is aangevinkt; class "uit" op .el
        als zijn checkbox niet is aangevinkt.
   6. De .laag hoeft NIET open te staan: dit stylesheet toont elke .laag van een
      gekozen maatregel; die van een niet-gekozen maatregel (.m.uit) blijft dicht.
   7. De gekozen keuze-chip (.chip.actief in .laag) blijft in de DOM als button —
      die wordt als tekstpil afgedrukt; de andere chips niet.
   8. Renovatieplicht: rapport.html zet details.open = true in de printmodus
      (?print=1); nieuwe browsers drukken een dichte <details> toch af.
   9. Getest met headless Chrome (--print-to-pdf) op een proefbestelling met
      vier maatregelen en pv per dakvlak.
   ===================================================================== */

/* ---- scoretrap in "stap voor stap" (balk per stap, ook op scherm) ---- */
@media print {
  .stap .stbar { height: 8px !important; margin-top: 7px !important; background: #EEECE6 !important; }
  .stap .stbar.start { position: relative; overflow: visible !important; }
  .stap .stbar.start em { display: block; position: absolute; right: 0; top: -13px; font-size: 9px; font-style: normal; color: #8A887F; }
  .stap.totaal .stbar.start { margin-top: 13px !important; }
  /* woordmerk exact als op de site: 800, verloop op "EPC" */
  /* woordmerk als svg: zelfde font-stack, 800, verloop op "EPC" — background-clip:text
     rendert in Chrome-print als een gekleurd vlak, een svg-verloop niet */
  svg.print-merk { display: block !important; width: 31mm; height: auto; margin: 0 0 7mm; }
}