/* print.css — per-page "Save as PDF" / print (client-side window.print()).
   Hide the app frame (navbar, page footer, help + download controls, map/table widget chrome),
   give the main content the full page width, and let cards break cleanly. The browser prints
   the CURRENT view, so map tiles already loaded on screen come through. Known client-side limits:
   a DT shows only its current page; very tall maps/plots may split across pages.
   The period/scope banner is KEPT — it dates + scopes the printout — as is the footer (its provenance
   line records the data-as-of + generated date). */
@media print {
  /* --- hide the app chrome --- */
  .navbar,
  .ik-print-btn { display: none !important; }

  /* The scope CHIP BARS are interactive controls; the resolved read-out (the scope banner sub-line) now
     carries the same scope as text on every page, so drop the dead buttons app-wide rather than print them.
     (The few pages with no read-out — species / occupancy / top-trappers / Analysis pack — keep their own
     on-page context; occupancy even has its own "as at" read-out.) The read-out itself is .ik-period-banner,
     not .ik-scope-bar, so it survives. */
  .ik-scope-bar { display: none !important; }

  /* Footer: keep it (provenance dates the printout), but let it flow at the end rather than pad a screen. */
  .ik-app-foot { padding: 0.6rem 0 0 !important; border-top: 1px solid #ddd; margin-top: 6mm; break-inside: avoid; }

  /* interactive-only bits that shouldn't appear on paper */
  .ik-info, .ik-help-btn,
  .ik-aar-dls,
  .dataTables_paginate, .dataTables_filter, .dataTables_length, .dt-buttons,
  .leaflet-control-zoom, .leaflet-control-layers, .leaflet-control-attribution,
  .selectize-control .selectize-input .clear { display: none !important; }

  /* --- main content spans the full page (no sidebar grid any more — the top-level nav pane is the content) --- */
  .navbar + .container-fluid > .tab-content > .tab-pane.active { padding: 0 !important; overflow: visible !important; }

  /* release the app's single-screen scroll containers so content flows onto multiple pages */
  html, body { height: auto !important; overflow: visible !important; background: #fff !important; }
  .html-fill-container, .html-fill-item,
  .bslib-page-fill, .tab-content, .tab-pane,
  .bslib-gap-spacing { overflow: visible !important; height: auto !important; }

  /* --- Shiny renders plots/images as a RASTER sized to the on-screen pixel width (renderPlot bakes the
     container's client width into the <img>). At a wide window (e.g. fullscreen) that fixed width exceeds
     the paper, so the page overflows horizontally and the browser shrinks the whole layout to fit — every
     block, top banner included, prints undersized at that oversized width. Cap the raster to the page width
     and let its height follow, so it scales to the paper instead of forcing the page wider. Scoped to Shiny
     plot/image outputs so Leaflet tile <img>s (a positioned mosaic) are untouched. --- */
  .shiny-plot-output img, .shiny-image-output img { max-width: 100% !important; height: auto !important; }

  /* --- keep blocks whole across page breaks where we can --- */
  .card, .bslib-card, .leaflet-container, .plotly, .shiny-plot-output { break-inside: avoid; }
  .card, .bslib-card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    break-inside: avoid;
  }
  /* Stat strip (ik_stat_strip): each cell stays whole and keeps a hairline rule on paper (this is the
     value_box replacement — it prints as light text cells, not toner-heavy showcase blocks). */
  .ik-stat { break-inside: avoid; border: 1px solid #ccc !important; box-shadow: none !important; }
  .ik-stat-value { font-size: 1.2rem !important; }

  /* --- DataTables with scrollX split ONE table into a standalone header table (.dataTables_scrollHead)
     plus a body table whose column widths are JS-synced to the on-screen width. On paper the two lay out
     independently and drift apart, and the header (printed once) stops lining up with the body — worse on
     page 2+, which gets rows and no header. Fix: drop the standalone header and reveal the body table's
     OWN header (present but collapsed to 0-height "sizing" divs). It's then a single table whose thead
     aligns with the tbody and, as a thead, repeats on every printed page. Reflow to the page width with an
     auto layout so nothing depends on the screen-computed pixel widths. --- */
  .dataTables_scroll, .dataTables_scrollHeadInner, .dataTables_scrollBody { width: auto !important; overflow: visible !important; }
  .dataTables_scrollHead { display: none !important; }               /* drop the duplicate header table */
  .dataTables_scrollBody { height: auto !important; max-height: none !important; border: 0 !important; }
  .dataTables_scrollBody > table { width: 100% !important; table-layout: auto !important; margin-top: 0 !important; }
  .dataTables_scrollBody > table > thead { display: table-header-group !important; }   /* reveal + repeat per page */
  .dataTables_scrollBody > table > thead > tr > th,
  .dataTables_scrollBody > table > thead > tr > td { width: auto !important; }
  .dataTables_scrollBody > table > tbody > tr > th,
  .dataTables_scrollBody > table > tbody > tr > td { width: auto !important; }
  .dataTables_scrollBody > table > thead .dataTables_sizing { height: auto !important; overflow: visible !important; }

  /* Let long tables break BETWEEN rows (not mid-row); a short table still stays whole. */
  table { break-inside: auto; }
  tr, th, td { break-inside: avoid; }
  thead { display: table-header-group; }

  /* --- maps: the screen layout fills the viewport (vh/flex height:100%); that chain collapses on
     paper, so the leaflet container loses its height while its panes stay sized to the on-screen map
     and spill OVER the records table. Un-fill, stack map above table, pin an explicit map height, and
     clip the panes so nothing overlaps. --- */
  .ik-map-fill { display: block !important; height: auto !important; }
  /* Un-grid/un-flex the map|table layouts so the table stacks UNDER the map. .ik-maps-split is the grid
     used by most pages; .ik-spex-row is Spatial explorer's own flex row (map · records side). */
  .ik-maps-split, .ik-spex-row { display: block !important; }
  .ik-maps-split > *, .ik-spex-row > * { width: 100% !important; max-width: 100% !important; flex: none !important; }
  .ik-maps-side, .ik-spex-side { margin-top: 6mm !important; max-height: none !important; }
  /* print.js freezes each map widget to its on-screen pixel height just before printing, so the map
     prints exactly as shown (same zoom/center, no crop, no tile reload). This is only a floor in case
     that JS hasn't run — DON'T pin a fixed height here or leaflet's panes get cropped. */
  /* Clip EVERY leaflet map's panes (not just .ik-maps-wrapped ones) — co-occurrence and other maps sit in
     a bare .ik-maps-split with no .ik-maps ancestor, so a wrapper-scoped rule missed them and their panes
     spilled over the records table. Print-scoped, so no on-screen effect. */
  .html-widget.leaflet { min-height: 70mm; }
  .leaflet-container {
    position: relative !important; overflow: hidden !important;  /* clip absolutely-positioned tile panes */
    break-inside: avoid;
  }

  @page { margin: 12mm; }
}