/* H3.3.1 — Sticker-print styles voor Brother QL-820NWBc met DK-22205
   continue rol (62mm breed). Lengte volgt content via @page size auto.
   Zwart-only: alle accent-kleuren weg in print-context.

   ALLES in mm zodat de printer fysiek de juiste maten haalt
   ongeacht browser-DPI. */

/* On-screen: print-area verbergen tenzij print-preview actief */
#print-area { display: none; }

@media print {
  /* Default fallback (monteur en eventuele toekomstige types).
     Opslag-sticker is LANDSCAPE: 90mm × 62mm — eigen named page. */
  @page { size: 62mm auto; margin: 0; }
  /* Opslag-sticker: papier fysiek portrait (rol is 62mm breed), content
     intern geroteerd -90deg zodat 'm landscape leest.
     H3.3.9: lange kant 110mm (was 90mm). */
  @page sticker-opslag-page  { size: 62mm 110mm; margin: 0; }
  /* Monteur-sticker: ook 110mm × 62mm landscape via rotate-aanpak. */
  @page sticker-monteur-page { size: 62mm 110mm; margin: 0; }

  html, body { margin: 0; padding: 0; background: white; }

  /* Verberg álle directe children van body — voorkomt lege eerste pagina.
     Geen visibility-truc meer (die liet body nog ruimte innemen). */
  body > *:not(#print-area) { display: none !important; }
  #print-area { display: block !important; }

  .sticker-page {
    width: 62mm;
    box-sizing: border-box;
    padding: 4mm;
    color: #000;
    background: #fff;
    page-break-after: always;
    break-after: page;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
  }
  .sticker-page:last-child { page-break-after: auto; break-after: auto; }

  hr.sticker-hr { border: none; border-top: 0.4mm solid #000; margin: 1.5mm 0; width: 100%; }

  /* OPSLAG ── papier portrait 62×110mm, content geroteerd -90° → landscape leesbaar.

     D5-fix-4 (28 mei) — print-pipeline batch-bug FUNDAMENTEEL opgelost:
     De vorige aanpak gebruikte position:absolute + top/left:50% +
     translate(-50%, -50%) rotate(-90deg) op de inner. Die percentage-
     positionering hangt aan het containing block. In Chromium's print-
     engine met @page + page-break-after + rotate-transform "lekt" de
     containing-block context tussen pagina's: alleen de laatste sticker
     krijgt een schone eindcontext, de eerdere stickers refereren aan
     verschoven percentages. Symptoom: alleen laatste sticker correct,
     rest mist onderste helft / QR verkeerd geplaatst.

     contain:layout+paint was te zwakke garde — Chromium honoreert
     containment niet altijd over page-break-grenzen heen.

     Nieuwe aanpak: ELIMINEER percentage-positionering volledig + gebruik
     FLEX i.p.v. grid voor de container.

     D5-fix-5 (28 mei) — grid auto-track-sizing bug ontdekt:
       display:grid + place-items:center ZONDER expliciete grid-template
       liet de impliciete track GROEIEN tot 108mm (fit-content child),
       waardoor het kind off-center kwam (parent-coord 54,55 i.p.v.
       31,55) en na rotate-90 de bottom-row (ids+QR) bij parent x>62
       buiten beeld klapte → 'alleen titel+adres zichtbaar'.

     Fix: display:flex + align/justify:center + flex-shrink:0 op kind.
       - Flex-container heeft FIXED size (62×110mm, niet auto)
       - Kind 108×60 overflow-t met SYMMETRISCHE overhang (23mm per kant)
       - Inner center op parent (31, 55) = parent-center exact
       - Na rotate-90 valt rotated bbox in x=1..61, y=1..109 — net binnen
         62×110, niks afgesneden.

     - overflow:hidden vangt pre-rotation overhang af
     - isolation:isolate + transform:translateZ(0) blijven voor extra
       compositing-isolatie per sticker (defensief). */
  .sticker-opslag {
    page: sticker-opslag-page;
    width: 62mm !important;
    height: 110mm !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
    transform: translateZ(0);
    contain: layout paint;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .sticker-opslag-inner {
    /* Landscape content 108×60mm — flex-shrink:0 voorkomt dat het kind
       krimpt om in de container te passen; symmetrische overhang +
       rotate centreert exact.

       Grid-rij-verdeling (D5-fix-3 behouden):
         20mm titel + 10mm adres + 26mm bottom = 56mm content-area
         (= 60mm − 2×2mm padding). */
    width: 108mm;
    height: 60mm;
    flex-shrink: 0;
    transform: rotate(-90deg);
    transform-origin: center center;
    padding: 2mm 3mm;
    box-sizing: border-box;
    display: grid;
    grid-template-rows: 20mm 10mm 26mm;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
    font-style: normal !important;
  }
  .sticker-opslag-inner * {
    font-style: normal !important;
  }

  /* Plaatsnaam — volle breedte, rij 1 (22mm hoog). Letter verkleind
     34→26mm zodat font-bbox (~21.3mm bij line-height 0.82) binnen de
     rij valt. Letter blijft visueel dominant — 26mm = ~73pt. */
  .sticker-opslag-plaats {
    display: flex; align-items: flex-end; gap: 2mm;
    width: 100%;
    line-height: 0.85;
    overflow: hidden;
  }
  .sticker-letter {
    font-size: 24mm;
    font-weight: 500;
    line-height: 0.82;
    letter-spacing: -0.6mm;
    display: inline-block;
    font-family: inherit !important;
  }
  .sticker-rest {
    font-size: 9mm;
    font-weight: 400;
    line-height: 1;
    padding-bottom: 0.5mm;
    display: inline-block;
    font-family: inherit !important;
    white-space: nowrap;
  }
  /* Adres — rij 2 (10mm). D5-fix-3: WRAP TOEGESTAAN naar 2 regels voor
     lange adressen. Korte adressen blijven op 1 regel met witruimte
     eronder. align-self: start zodat adres bovenaan rij 2 zit; overflow
     hidden vangt 3+ regels af (uiterst zeldzaam, font is bewust klein
     genoeg dat alle realistische adressen in 2 regels passen). */
  .sticker-opslag-adres {
    align-self: start;
    font-size: 3.6mm;
    margin: 0;
    line-height: 1.25;
    font-weight: 500;
    font-family: inherit !important;
    overflow: hidden;
    width: 100%;
  }
  /* HR uit layout — gebruik border-top op .sticker-opslag-bottom */
  .sticker-hr { display: none; }
  /* Onderste regel — rij 3 (26mm hoog). Ids links + QR rechts, met
     scheidingslijn die OOK fungeert als quiet-zone-grens van de QR.
     padding-top 0.5mm + border 0.4mm = 0.9mm overhead, laat 25.1mm
     voor content; QR is 22+2 padding = 24mm, past comfortabel. */
  .sticker-opslag-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3mm;
    border-top: 0.4mm solid #000;
    padding-top: 0.5mm;
    box-sizing: border-box;
    height: 100%;
    overflow: hidden;
  }
  .sticker-opslag-ids {
    flex: 1; min-width: 0;
    font-size: 4mm; line-height: 1.5;
    font-weight: 600;
    font-family: inherit !important;
  }
  .sticker-ids-row {
    display: flex;
    gap: 5mm;
  }
  .sticker-id-rij {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sticker-id-lbl {
    font-weight: 700;
    color: #000;
    margin-right: 0.5mm;
    font-family: inherit !important;
  }
  .sticker-id-sn {
    font-family: "Courier New", monospace !important;
    font-weight: 700;
    letter-spacing: 0.1mm;
  }
  .sticker-opslag-binnen {
    margin-top: 1mm;
    font-size: 3.5mm;
    color: #000;
    font-weight: 600;
    font-style: normal !important;
    font-family: inherit !important;
  }
  /* QR met quiet zone via CSS — vereist door QR-spec (≥4 modules wit).
     D5-fix-2: QR teruggebracht van 26→22mm zodat hij + padding in de
     27mm bottom-row past. 22mm met ECL H + ONDERDEEL:<uuid> (45 tekens)
     is nog steeds ruim scanbaar — de oorspronkelijke 20mm was nét te
     krap, 22mm geeft scan-marge zonder layout-overflow te veroorzaken.
     padding: 2mm aan alle kanten garandeert quiet-zone die geen
     tekst-element kan overschrijven (eigen flex-cel + witte bg). */
  .sticker-opslag-qr {
    flex: 0 0 auto;
    flex-shrink: 0;
    width: 22mm; height: 22mm;
    padding: 2mm;
    background: #fff;
    box-sizing: content-box;  /* 22mm content + 2mm padding = 26mm totaal */
  }
  .sticker-opslag-qr svg {
    width: 100%; height: 100%; display: block;
    shape-rendering: crispEdges;
    image-rendering: pixelated;
  }

  /* MONTEUR ── papier portrait 62×110mm, content geroteerd -90° → landscape leesbaar
     H3.4: zelfde rotate-aanpak als opslag-sticker, andere content.
     D5-fix: contain+transform-origin als preventie tegen zelfde batch-shift
     bug die opslag-sticker liet zien — monteur is single-print in praktijk,
     maar consistency. */
  /* D5-fix-5: flex + flex-shrink:0 zodat container fixed 62×110 blijft
     en het 108-brede kind symmetrisch overhang-t (geen track-growth). */
  .sticker-monteur {
    page: sticker-monteur-page;
    width: 62mm !important;
    height: 110mm !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
    transform: translateZ(0);
    contain: layout paint;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .sticker-monteur-inner {
    width: 108mm;
    height: 60mm;
    flex-shrink: 0;
    transform: rotate(-90deg);
    transform-origin: center center;
    padding: 2mm 3mm;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
    font-style: normal !important;
    color: #000;
  }
  .sticker-monteur-inner * { font-style: normal !important; }

  /* Top: datum/tijd links, stop-kader rechts */
  .sticker-monteur-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4mm;
  }
  .sticker-monteur-datumtijd { flex: 1; min-width: 0; }
  .sticker-monteur-datum {
    font-size: 10mm;
    font-weight: 600;
    line-height: 1.05;
    font-family: inherit !important;
  }
  .sticker-monteur-tijd {
    font-size: 9mm;
    font-weight: 500;
    line-height: 1.1;
    margin-top: 0.5mm;
    font-family: inherit !important;
  }

  .sticker-monteur-stop {
    flex: 0 0 auto;
    border: 0.7mm solid #000;
    padding: 2mm 4mm;
    text-align: center;
    min-width: 24mm;
    box-sizing: border-box;
  }
  .sticker-monteur-stop-label {
    font-size: 2.8mm;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.4mm;
    font-weight: 600;
    font-family: inherit !important;
  }
  .sticker-monteur-stop-nr {
    font-size: 11mm;
    font-weight: 700;
    line-height: 1;
    font-family: inherit !important;
  }

  /* Notitie-kader — altijd zichtbaar, kan leeg zijn */
  .sticker-monteur-notitie {
    border: 0.7mm solid #000;
    padding: 3mm 4mm;
    font-size: 5mm;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
    min-height: 12mm;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit !important;
  }

  /* Bottom: monteur-naam links, SC/SE rechts */
  .sticker-monteur-bottom {
    border-top: 0.5mm solid #000;
    padding-top: 2mm;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4mm;
  }
  .sticker-monteur-naam {
    font-size: 6mm;
    font-weight: 700;
    font-family: inherit !important;
  }
  .sticker-monteur-ids {
    font-size: 4mm;
    line-height: 1.4;
    font-weight: 600;
    text-align: right;
    font-family: inherit !important;
  }
  .sticker-monteur-id-label {
    color: #555;
    font-weight: 700;
    margin-right: 0.5mm;
    font-family: inherit !important;
  }

  /* QR — SVG vult de wrapper exact (alleen opslag-sticker, behouden voor compat) */
  .sticker-qr-wrap { line-height: 0; width: 100%; height: 100%; }
  .sticker-qr-wrap svg { width: 100%; height: 100%; display: block; }

  /* TOOL-STICKER (D5.6) — D5-fix-5 flex+flex-shrink:0 consistent */
  @page sticker-tool-page { size: 62mm 110mm; margin: 0; }
  .sticker-tool {
    page: sticker-tool-page;
    width: 62mm !important;
    height: 110mm !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
    transform: translateZ(0);
    contain: layout paint;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .sticker-tool-inner {
    width: 108mm;
    height: 60mm;
    flex-shrink: 0;
    transform: rotate(-90deg);
    transform-origin: center center;
    padding: 3mm 4mm;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr auto;
    gap: 2mm;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  }
  .sticker-tool-naam {
    grid-column: 1; grid-row: 1 / span 2;
    font-size: 11mm;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.3mm;
    color: #000;
    align-self: center;
    word-break: break-word;
  }
  .sticker-tool-qr {
    grid-column: 2; grid-row: 1;
    width: 36mm;
    height: 36mm;
    line-height: 0;
  }
  .sticker-tool-qr svg { width: 100%; height: 100%; display: block; }
  .sticker-tool-footer {
    grid-column: 2; grid-row: 2;
    font-size: 3mm;
    color: #555;
    text-align: right;
    align-self: end;
  }
}