/* ==========================================================================
   report-a4.css — zelfstandig A4-STAAND (210 x 297mm) rapportontwerp
   ==========================================================================

   Volledige herontwerp (juli 2026): het eerdere A4-bestand was een
   geometrisch verkleinde A3-liggend-layout ("alles 30% kleiner naast
   elkaar") en paste daardoor nooit lekker op A4. Dit bestand zet dezelfde
   vier sheet-templates (.sheet-1 t/m .sheet-4) om naar een echt staand
   documentformaat:

   - Eigen staand voorblad (pagina 1), daarna de inhoudsblokken.
   - Blokken onder elkaar of maximaal 2 naast elkaar; brede tabellen
     (risico's, stand van zaken, gantt) altijd op volle breedte.
   - Zelfde kaartstijlen, kleuren en status-indicatoren als A3: alleen
     layout en maatvoering worden hier overschreven, de rest cascadeert
     gewoon uit report.css.
   - Natuurlijke paginering: content-sheets hebben geen vaste hoogte;
     inhoud die niet past loopt door naar de volgende fysieke pagina en
     break-inside: avoid op kaarten/rijen voorkomt lelijke afbrekingen.
   - Vaste paginanummers ("Pagina 2 van 3") kloppen niet bij doorlopende
     paginering en worden op A4 verborgen.
   - Alle declaraties dragen !important: de A3-printregels werken met
     vaste hoogtes/overflow:hidden mét !important en moeten hier
     verliezen zodra A4 actief is.

   Elke selector begint met body[data-paper-size="a4"]: dit bestand is
   volledig inert tenzij A4 gekozen is. Het @page-formaat wordt niet hier
   geregeld maar via CSSOM-mutatie van de bestaande @page-regels, door
   setPaperSize() in main.js (client) en applyPaperSizeInPage() in
   api/render-pdf.js (server).
   ========================================================================== */

/* ── 0. Planning-/geldpagina uitgezet: sheet volledig verbergen ──
   report.css heeft deze guards al voor A3, maar report-a4.css toont .sheet-3/
   .sheet-4 in §4/§6/§7 expliciet met display:block !important. Zonder deze
   regels bleef een uitgezette Planning-/Geldpagina dus tóch in de A4-PDF
   staan. Hogere specificiteit (body + [attr] + .*-off + .sheet-n) dan die
   display:block-regels, dus dit wint in scherm én print. Alleen actief als
   de bijbehorende off-klasse aanwezig is; de normale A4-output verandert niet. */
body[data-paper-size="a4"].planning-page-off .sheet-3 {
  display: none !important;
}
body[data-paper-size="a4"].budget-page-off .sheet-4 {
  display: none !important;
}

/* ── 1. Sheets: staand canvas, natuurlijke hoogte ── */
body[data-paper-size="a4"] .sheet {
  width: 210mm !important;
  /* Geen min-height:297mm hier: dat forceerde eerder óók sheet-2/3/4 op
     minimaal een volle pagina, ongeacht hun werkelijke inhoud — precies
     wat de doorlopende flow uit §1 hieronder had moeten voorkomen. Alleen
     sheet-1 (het voorblad) krijgt zijn eigen vaste 297mm (§2). */
  min-height: 0 !important;
  margin: 0 auto 12px auto !important;
  overflow: visible !important;
}
/* Padding NIET voor de nv-* rapportpagina's (voorblad/overzicht/bijlage):
   die zetten hun eigen padding in rapport.js (.nv-cover/.nv-dash/
   .nv-bijlage), maar deze regel had door zijn hogere selector-specificiteit
   (body[attr] .sheet vs. .nv-cover) die eigen padding altijd overschreven,
   ook al staan beide op !important — elk A4-rapport kreeg zo stilzwijgend
   de verkeerde paginamarges. */
body[data-paper-size="a4"] .sheet:not(.nv-cover):not(.nv-dash):not(.nv-bijlage) {
  padding: 13mm 12mm 11mm !important;
}

@media print {
  body[data-paper-size="a4"] .sheet {
    margin: 0 !important;
    border: 0 !important;
  }
  body[data-paper-size="a4"] .sheet-1 {
    height: 297mm !important;
    min-height: 0 !important;
    max-height: 297mm !important;
    page-break-after: always !important;
    overflow: hidden !important;
  }
  /* max-height expliciet los: het Chrome-printblok in styles.css klemt
     alle sheets op calc(297mm - 3mm) !important — dat kapt hier anders
     de doorlopende inhoud (o.a. Issues/Risico's/Besluiten) af. */
  /* Geen geforceerde page-break-before meer tussen sheet-2/3/4: bij A3
     was elke sheet een eigen dashboardpagina die je bewust vol wilde
     zetten, maar op A4 is de inhoud per sheet vaak korter dan een hele
     pagina — met een geforceerde break bleef 50-90% van elke pagina
     leeg (Planning/Geld hadden bv. maar een kwart pagina inhoud). De
     content loopt nu gewoon door; break-inside:avoid op kaarten (§4-7)
     voorkomt dat een kaart middendoor knipt. */
  body[data-paper-size="a4"] .sheet-2,
  body[data-paper-size="a4"] .sheet-3,
  body[data-paper-size="a4"] .sheet-4 {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    page-break-before: auto !important;
    page-break-after: auto !important;
    overflow: visible !important;
  }
  /* De basis .sheet-klasse zet break-inside:avoid (bedoeld voor A3, waar
     één sheet altijd exact één pagina is): op A4 duwt dat sheet-3/4 in
     hun geheel naar de volgende pagina zodra ze niet meer in de
     resterende ruimte van de huidige pagina passen, ook al zijn ze
     zelf best te splitsen. Resultaat was 2/3 lege pagina + de hele
     Planning-sheet alsnog op een nieuwe pagina. De kaarten/rijen/kpi's
     binnenin (§4-7) blijven zelf wel break-inside:avoid, dus een
     eventuele afbreking valt nog steeds op een nette rand. */
  body[data-paper-size="a4"] .sheet-2,
  body[data-paper-size="a4"] .sheet-3,
  body[data-paper-size="a4"] .sheet-4 {
    break-inside: auto !important;
    page-break-inside: auto !important;
  }
}

/* Vaste paginanummer-teksten kloppen niet bij doorlopende A4-paginering. */
body[data-paper-size="a4"] .sheet-note {
  display: none !important;
}
body[data-paper-size="a4"] .sheet-credit {
  position: static !important;
  margin-top: 4mm !important;
  text-align: right !important;
  font-size: 6.5pt !important;
  color: #8a94a6 !important;
}

/* ── 2. Voorblad (sheet-1): staand, rustig, document-waardig ── */
body[data-paper-size="a4"] .sheet-1 {
  height: 297mm !important;
  display: block !important;
  page-break-after: always !important;
  overflow: hidden !important;
}
body[data-paper-size="a4"] .cover {
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  height: 100% !important;
  gap: 8mm !important;
}
body[data-paper-size="a4"] .cover-header {
  display: block !important;
  position: relative !important;
  padding-top: 4mm !important;
}
/* Accentbalk bovenaan: zonder anker begint de pagina met louter kale
   witruimte boven de datum/logo-regel — de balk geeft direct een
   merkherkenbaar startpunt, in dezelfde kleur als de rest van de site. */
body[data-paper-size="a4"] .cover-header::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 22mm !important;
  height: 1.6mm !important;
  background: var(--green, #00a651) !important;
  border-radius: 1mm !important;
}
body[data-paper-size="a4"] .cover-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 8mm !important;
  margin-bottom: 10mm !important;
}
/* display expliciet terug: het Chrome-printblok in styles.css (@media
   print, ongescoped naar papierformaat) verbergt .cover-date met
   display:none !important — op A3 komt de datum elders niet terug op
   het voorblad, maar op A4 hoort 'm juist in de kopregel te staan. */
body[data-paper-size="a4"] .cover-date {
  display: block !important;
  font-size: 9pt !important;
}
body[data-paper-size="a4"] .cover-logo {
  max-width: 52mm !important;
}
body[data-paper-size="a4"] .cover-logo img {
  max-height: 14mm !important;
  max-width: 52mm !important;
}
/* Kicker-label boven de titel: geeft de pagina meteen context en gewicht
   voordat de titel het overneemt, in plaats van dat de titel als eerste
   (en enige) visuele stap op een verder lege pagina staat. */
body[data-paper-size="a4"] .cover-hero::before {
  content: "Voortgangsrapportage" !important;
  display: block !important;
  font-size: 8.5pt !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--green, #00a651) !important;
  margin: 0 0 3mm !important;
}
body[data-paper-size="a4"] .cover-hero h1 {
  font-size: 28pt !important;
  line-height: 1.12 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 4mm !important;
}
body[data-paper-size="a4"] .cover-hero p {
  font-size: 11.5pt !important;
  line-height: 1.45 !important;
  max-width: 150mm !important;
}
body[data-paper-size="a4"] .cover-content-frame {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 8mm !important;
  min-height: 0 !important;
  height: auto !important;
}
body[data-paper-size="a4"] .cover-image {
  min-height: 0 !important;
  border-radius: 3mm !important;
  overflow: hidden !important;
  box-shadow: inset 0 0 0 0.4mm rgba(38, 49, 42, 0.1) !important;
}
body[data-paper-size="a4"] .cover-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
/* Meta-pillen: drie rustige rijen onder elkaar */
body[data-paper-size="a4"] .cover-meta {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 3mm !important;
}
body[data-paper-size="a4"] .cover-meta .meta-pill {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 6mm !important;
  padding: 3.4mm 5mm 3.4mm 5.5mm !important;
  font-size: 9.5pt !important;
  border-left: 1mm solid var(--green, #00a651) !important;
  border-radius: 0 1.5mm 1.5mm 0 !important;
}
body[data-paper-size="a4"] .cover-meta .meta-pill strong {
  font-size: 7.5pt !important;
  letter-spacing: 0.04em !important;
}

/* ── 3. Documentkop op de content-pagina's (p2-header) ── */
body[data-paper-size="a4"] .p2-header {
  display: block !important;
  margin-bottom: 7mm !important;
  padding-bottom: 4mm !important;
  border-bottom: 0.5mm solid #dbe2ea !important;
}
body[data-paper-size="a4"] .p2-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 8mm !important;
  margin-bottom: 3mm !important;
}
/* zie toelichting bij .cover-date hierboven: idem voor de p2-datum op
   sheet-2 (het Chrome-printblok verbergt .sheet-2 .p2-date). */
body[data-paper-size="a4"] .p2-date {
  display: block !important;
  font-size: 8pt !important;
}
body[data-paper-size="a4"] .p2-logo img {
  max-height: 9mm !important;
  max-width: 40mm !important;
}
body[data-paper-size="a4"] .p2-title {
  font-size: 15pt !important;
  line-height: 1.2 !important;
  margin: 0 0 1.5mm !important;
}
body[data-paper-size="a4"] .p2-meta {
  font-size: 9pt !important;
}
/* Sheet-3 (Planning) en sheet-4 (Geld) herhalen bij doorlopende A4-flow
   niet de volledige documentkop (logo + projectnaam + omschrijving) —
   het kaartlabel (PLANNING/GELD, zie §4/6/7) identificeert de sectie al
   en drie keer dezelfde kop oogt op één doorlopend document als ruis.
   Alleen een dunne doorloopstrook met projectnaam en datum blijft over,
   zodat een los geprinte pagina nog steeds herkenbaar is. */
body[data-paper-size="a4"] .sheet-3 .p2-header,
body[data-paper-size="a4"] .sheet-4 .p2-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 6mm !important;
  margin-bottom: 6mm !important;
  padding-bottom: 2.5mm !important;
  border-bottom: 0.4mm solid #dbe2ea !important;
}
/* sheet-3 wikkelt titel/datum/logo in tussenliggende .p2-top/.p2-hero
   divs; die "ontvouwen" met display:contents zodat titel en datum als
   losse flex-items in de doorloopstrook hierboven meedoen. sheet-4 is
   al plat, dus daar is dit een no-op. */
body[data-paper-size="a4"] .sheet-3 .p2-top,
body[data-paper-size="a4"] .sheet-3 .p2-hero {
  display: contents !important;
}
body[data-paper-size="a4"] .sheet-3 .p2-logo,
body[data-paper-size="a4"] .sheet-4 .p2-logo,
body[data-paper-size="a4"] .sheet-3 .p2-meta,
body[data-paper-size="a4"] .sheet-4 .p2-meta {
  display: none !important;
}
body[data-paper-size="a4"] .sheet-3 .p2-title,
body[data-paper-size="a4"] .sheet-4 .p2-title {
  font-size: 9.5pt !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: #6b7684 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  order: 1 !important;
}
body[data-paper-size="a4"] .sheet-3 .p2-date,
body[data-paper-size="a4"] .sheet-4 .p2-date {
  font-size: 8pt !important;
  color: #8a94a6 !important;
  order: 2 !important;
}

/* ── 4. Rapportpagina (sheet-2): blokken onder elkaar of 2 naast elkaar ── */
body[data-paper-size="a4"] .sheet-2 {
  display: block !important;
  height: auto !important;
}
body[data-paper-size="a4"] .report-grid {
  display: block !important;
  height: auto !important;
  overflow: visible !important;
}
body[data-paper-size="a4"] .cards-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-flow: row dense !important;
  align-items: start !important;
  gap: 5mm !important;
  margin-bottom: 5mm !important;
  height: auto !important;
  overflow: visible !important;
}
body[data-paper-size="a4"] .card {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  break-inside: avoid !important;
  page-break-inside: avoid !important;
}
/* Rij 1 (Doel/Scope/Kwaliteit): 2 naast elkaar, oneven rest op volle breedte */
body[data-paper-size="a4"] .report-grid .cards-row:first-of-type > .card:last-child:nth-child(odd) {
  grid-column: 1 / -1 !important;
}
/* Rij 2: Stand van zaken (lijsten) op volle breedte; Tijd en Geld eronder naast elkaar */
body[data-paper-size="a4"] .report-grid .cards-row:nth-of-type(2) > .card:first-child {
  grid-column: 1 / -1 !important;
}
/* Rij 3: Risico's (4 kolommen) op volle breedte; Issues en Besluiten samen op één rij */
body[data-paper-size="a4"] .report-grid .bottom-row > .card:nth-child(2) {
  grid-column: 1 / -1 !important;
}

/* Kaartinhoud mag natuurlijk uitlopen */
body[data-paper-size="a4"] .sheet-2 .card .card-content {
  height: auto !important;
  overflow: visible !important;
}
body[data-paper-size="a4"] .progress-group {
  break-inside: avoid !important;
}

/* ── 5. Typografie en tabellen: document-maat ── */
body[data-paper-size="a4"] .card-head h3 {
  font-size: 9.5pt !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
}
body[data-paper-size="a4"] .card-content,
body[data-paper-size="a4"] .card-content p {
  font-size: 9.5pt !important;
  line-height: 1.5 !important;
}
body[data-paper-size="a4"] .card-content table {
  font-size: 8.5pt !important;
}
body[data-paper-size="a4"] .card-content th {
  font-size: 7.5pt !important;
}
body[data-paper-size="a4"] .card-content tr,
body[data-paper-size="a4"] .card-content td,
body[data-paper-size="a4"] .card-content th {
  break-inside: avoid !important;
  page-break-inside: avoid !important;
}
body[data-paper-size="a4"] .status-list li {
  font-size: 8.5pt !important;
  line-height: 1.45 !important;
}
/* Besluit-tekstkolom (2e): op A4 ruimer en links uitgelijnd, anders breken
   woorden. De 3e kolom is nu de statusbadge (punt 11) — smal en gecentreerd. */
body[data-paper-size="a4"] .decision-table th:nth-child(2),
body[data-paper-size="a4"] .decision-table td:nth-child(2) {
  width: 32% !important;
  text-align: left !important;
}
body[data-paper-size="a4"] .decision-table th:nth-child(3),
body[data-paper-size="a4"] .decision-table td:nth-child(3) {
  width: 24% !important;
  text-align: center !important;
}
body[data-paper-size="a4"] .clamp {
  display: block !important;
  -webkit-line-clamp: unset !important;
  max-height: none !important;
  overflow: visible !important;
}

/* ── 6. Planning (sheet-3): samenvatting 2x2, gantt op volle breedte ── */
body[data-paper-size="a4"] .sheet-3 {
  display: block !important;
  height: auto !important;
}
body[data-paper-size="a4"] .planning-page-grid {
  display: block !important;
  height: auto !important;
  overflow: visible !important;
}
body[data-paper-size="a4"] .planning-card {
  height: auto !important;
  overflow: visible !important;
  /* Overschrijft de algemene .card break-inside:avoid (§4): deze kaart
     beslaat vrijwel een hele pagina, dus "in zijn geheel niet afbreken"
     duwt 'm bij de minste of geringste overloop in zijn geheel naar de
     volgende pagina — met een halflege pagina ervoor als gevolg. De
     tabelrijen/kpi's hieronder blijven zelf wel beschermd. */
  break-inside: auto !important;
  page-break-inside: auto !important;
}
body[data-paper-size="a4"] .planning-summary {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 3mm !important;
  margin-bottom: 5mm !important;
  break-inside: avoid !important;
}
body[data-paper-size="a4"] .planning-summary .planning-kpi {
  break-inside: avoid !important;
}
body[data-paper-size="a4"] .gantt-wrap {
  overflow: visible !important;
  font-size: 7pt !important;
}
body[data-paper-size="a4"] .planning-image-wrap img {
  max-width: 100% !important;
}
body[data-paper-size="a4"] .planning-conclusion {
  font-size: 9pt !important;
}

/* ── 7. Geld (sheet-4) ── */
body[data-paper-size="a4"] .sheet-4 {
  display: block !important;
  height: auto !important;
}
body[data-paper-size="a4"] .budget-page-grid {
  display: block !important;
  height: auto !important;
  overflow: visible !important;
}
body[data-paper-size="a4"] .budget-page-card {
  height: auto !important;
  overflow: visible !important;
  /* Zelfde reden als .planning-card hierboven. */
  break-inside: auto !important;
  page-break-inside: auto !important;
}
body[data-paper-size="a4"] .budget-image-wrap img {
  max-width: 100% !important;
}
/* Afbeeldingen zonder src (preview.js haalt het attribuut weg bij leegte)
   renderen anders als kapot icoon naast de lege-status-tekst. */
body[data-paper-size="a4"] .budget-image-wrap img:not([src]),
body[data-paper-size="a4"] .planning-image-wrap img:not([src]) {
  display: none !important;
}