.non-printable {
  display: none !important;
}

.print-mode-enabled .non-printable {
  display: none !important;
}

html,
body {
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serifsans-serif, sans-serif;
  background: #f6f8f9;
  padding: 0;
  margin: 0;
}

@page {
  @top-left {
    content: element(topLeftMarginBoxRunning);
  }

  @top-center {
    content: element(topCenterMarginBoxRunning);
  }

  @top-right {
    content: element(topRightMarginBoxRunning);
  }

  @bottom-left {
    content: element(bottomLeftMarginBoxRunning);
  }

  @bottom-center {
    content: element(bottomCenterMarginBoxRunning);
  }

  @bottom-right {
    content: element(bottomRightMarginBoxRunning);
  }
}

.topLeftMarginBox {
  position: running(topLeftMarginBoxRunning);
}

.topCenterMarginBox {
  position: running(topCenterMarginBoxRunning);
}

.topRightMarginBox {
  position: running(topRightMarginBoxRunning);
}

.bottomLeftMarginBox {
  position: running(bottomLeftMarginBoxRunning);
}

.bottomCenterMarginBox {
  position: running(bottomCenterMarginBoxRunning);
}

.bottomRightMarginBox {
  position: running(bottomRightMarginBoxRunning);
}

.no-break {
  break-inside: avoid;
}

.page-number-total:before {
  content: counter(pages);
}

.page-number-current:before {
  content: counter(page);
}

/*
 * Widens a full-width group from the page's content box out to the paper edge, so its
 * background color reaches the sheet edges instead of stopping at the text column.
 *
 * The distance to cover is the @page margin, which report-style.ts writes from the
 * dashboard's configured pageLayout and defaults to 20mm — it cannot be hardcoded here
 * (it used to be 1cm, i.e. half the default, which left an unpainted strip at each
 * edge). The paged.js Polisher re-declares each @page margin as --pagedjs-margin-<side>
 * on .pagedjs_page, so the group inherits the real numbers. The 1cm fallbacks only
 * apply outside paged.js, where there is no @page geometry to read.
 *
 * position/left/width rather than negative margins: the group keeps its original
 * in-flow box, which is what paged.js measures when looking for break tokens. It also
 * degrades correctly — a page margin of `0` reaches these calc()s as a unitless zero,
 * making them invalid at computed-value time, which lands on `left: auto` / `width:
 * auto`, i.e. exactly the un-bled box a zero margin should produce.
 *
 * @page *padding* is deliberately not compensated. It insets .pagedjs_area from the
 * margin box, but the Polisher emits an unset one as a unitless `0`, so adding it in
 * would invalidate the whole declaration on every report that leaves paddings alone.
 * A report that sets a page padding keeps a band of that width at each edge.
 */
.full-bleed {
  position: relative;
  left: calc(-1 * var(--pagedjs-margin-left, 1cm));
  width: calc(100% + var(--pagedjs-margin-left, 1cm) + var(--pagedjs-margin-right, 1cm));
  padding: 0cm var(--pagedjs-margin-right, 1cm) 0.5cm var(--pagedjs-margin-left, 1cm);
  box-sizing: border-box;
}

/*
 * Paint-only variant of the bleed above, for a group whose own box must not move: it
 * leaves the container exactly where it is and lays a band of its background color
 * across the full paper width behind it.
 *
 * Report grid groups need this. react-grid-layout measures their container and bakes
 * pixel widths into every item, and it does so in the pre-pagination DOM which has no
 * @page geometry — so that container carries a concrete inline width (PAGE_WIDTHS) and a
 * CSS-sized box like `.full-bleed` either loses to it or, if the inline width is removed,
 * lets the grid measure the whole app layout and render one item per row.
 *
 * Anchored by width, not by a right inset: the container's inline width is PAGE_WIDTHS,
 * which is not the page's content width, so insetting each side by its margin overshoots
 * the right paper edge. `left` + `width` instead put the band on the paper itself, and
 * keep one custom property per declaration so a unitless `0` margin can only invalidate
 * the offset it appears in.
 *
 * Not in the flow and behind its siblings by paint order (it precedes the positioned grid
 * items in the DOM), so it can neither affect paged.js fragmentation nor cover content.
 * It does have to escape the container's `overflow: hidden` — see GridLayout.scss.
 */
.full-bleed-background {
  position: relative;
}

.full-bleed-background::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--pagedjs-margin-left, 1cm));
  width: var(--pagedjs-width, 210mm);
  background-color: inherit;
}

.report-grid-container.full-bleed-background {
  overflow: visible;
}

.dark {
  background-color: black;
}

.light {
  background-color: white;
}

.transparent {
  background-color: transparent;
}

@media screen {
  .pagedjs_pages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .pagedjs_page {
    border: 1px solid #d6d9dc;
    border-radius: 5px;
    margin: 1.5rem;
  }

  .grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 1rem;
  }
}

@media print {
  #root {
    display: none;
  }

  #preview {
    display: block;
  }

  * {
    print-color-adjust: exact;
  }
}