/*
 * Print styles. Linked with media="print" AFTER application.css — see
 * app/views/layouts/application.html.erb, which links stylesheets explicitly and in order for
 * exactly this reason.
 *
 * What is printed is a grower's settlement statement, so the whole page has to reach the paper:
 * the chrome is hidden with Bootstrap's own .d-print-none utility (on the navbar, the flash and
 * the page header's controls) rather than with selectors of our own, and everything below is
 * about the tables surviving the trip.
 *
 * The rules are inside @media print as well as being linked with media="print". That is belt and
 * braces on purpose: nothing here should ever reach the screen, and a stylesheet_link_tag that
 * lost its media attribute — or a future bundle that swept this file up with the others — would
 * otherwise strip the striping and the shadows off every page in the app.
 */

/* Landscape, not portrait. A settlement statement is mostly wide tables — the ticket list is
 * nine columns and the deliveries block eight — and portrait's 7.5in of content forces the
 * headings onto three lines each and breaks "High Oleic Soybeans NGMO-Wabash" across four. At
 * 10in they fit. The client's own workbook reaches the same conclusion: its data-heavy tabs are
 * landscape, and most of the rest set fitToWidth. */
@page {
  size: letter landscape;
  margin: 0.4in;
}

/* The single most important rule here.
 *
 * Bootstrap's .table-responsive sets overflow-x: auto, which on screen gives a wide table a
 * scrollbar. On paper there is no scrollbar: the overflow is simply CLIPPED, and the right-hand
 * columns of the ticket table vanish with nothing to hint that they were ever there. The
 * min-width override goes with it, because application.css gives every responsive table a 40rem
 * minimum that would otherwise force the same clipping from the other side. */
@media print {
  .table-responsive {
    overflow: visible !important;
  }

  .table-responsive > .table {
    min-width: 0;
  }

  /* Ink, not screen: a card is a group of rows on paper, not a raised surface. */
  .card {
    box-shadow: none !important;
    break-inside: avoid;
  }

  /* The exception. A period can settle dozens of loads, and a card that must not break would
     push the whole table onto a page of its own — or off the end of it. */
  .card-tickets {
    break-inside: auto;
  }

  /* Smaller type is what actually makes the wide tables fit, and `.table` alone does not deliver
   * it. application.css sets `font-size: 0.9375rem` directly on `.font-monospace`, which is every
   * numeric cell in the app — a rule on the table is inherited by the cells that have no size of
   * their own and overridden by the ones that do, so the figures kept their screen size and only
   * the labels shrank. Both have to be named.
   *
   * 8.5pt is comfortably readable and is the difference between the ticket table fitting its nine
   * columns on one line each and running past the card. */
  .table,
  .table .font-monospace {
    font-size: 8pt;
  }

  /* Row height follows line-height as much as font size, and a statement is read across rather
   * than down. */
  .table > :not(caption) > * > * {
    line-height: 1.25;
  }

  /* Headings wrap; figures never do. This is what makes the nine-column ticket table fit, and
   * the split is deliberate — a heading over two lines costs two lines once per page, whereas
   * letting the data cells wrap makes every row two lines tall and grew the statement by a whole
   * page when it was tried.
   *
   * Measured rather than guessed, at paper width (10.2in = 979px) with the longest field name in
   * the client's own workbook ("1022 Garrett D.  West Place"): at 8pt with headings wrapping, no
   * cell overflows its box and the table lands at exactly 979px with 22px single-line rows. At
   * 8.5pt with headings on one line it was 198px too wide and the card's right border cut through
   * the last column's figures. Do not raise the font here without re-measuring. */
  .table > thead th {
    white-space: normal !important;
  }

  /* The ticket table is nine columns wide and keeps .text-nowrap on paper, deliberately.
   *
   * On screen .table-responsive gives it a scrollbar; on paper there is nowhere to scroll, so it
   * has to be made to fit instead. Letting it wrap was tried and is worse: every row becomes two
   * lines tall ("High Oleic Soybeans / NGMO-Wabash", "04/02/26 8:00 / AM") and the statement
   * grows by a whole page, most of it blank. Shrinking the type keeps one row to one line and
   * still leaves the last column inside the card, which is what matters — a printer with wider
   * hardware margins than Chrome's preview would otherwise trim it, and a settlement missing its
   * last column is a wrong document rather than an untidy one.
   *
   * The tighter cells go with it: the default .table padding is sized for a mouse pointer, which
   * paper does not have. */
  .table > :not(caption) > * > * {
    padding: 0.15rem 0.25rem;
  }

  /* Cards sit 1rem apart on screen (mt-3). Half that is plenty once the shadows are gone, and it
   * is the difference between a statement running onto another sheet or not. */
  .card {
    margin-top: 0.5rem !important;
  }

  .card-body {
    padding: 0.6rem 0.75rem;
  }

  .card-header {
    padding: 0.4rem 0.75rem;
  }

  /* Column headings repeat on every page of a table that runs over, and no row is split down
     the middle. Without the thead rule the second page of a long ticket table is a wall of
     unlabelled numbers. */
  thead {
    display: table-header-group;
  }

  tfoot {
    display: table-footer-group;
  }

  tr {
    break-inside: avoid;
  }

  /* Links are the primary style on these pages — every table cell that identifies a record is
     one — and blue underlined text on a statement reads as emphasis that is not there. */
  a {
    color: inherit !important;
    text-decoration: none !important;
  }

  /* Striping is a screen affordance; printers render the tint as a grey wash that makes small
     figures harder to read, and costs toner to do it. */
  .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: transparent;
  }

  /* The body's tinted background belongs to the app shell, which is not being printed. */
  body {
    background-color: #fff !important;
  }

  /* Ink is black on white, stated rather than inherited.
   *
   * The app's own colours are already light — Bootstrap resolves --bs-body-color to #212529 on
   * #fff — so this looks redundant, and against a plain browser it is. It is here for the
   * machine it will actually be printed from: a dark-mode browser extension (or Chrome's own Auto
   * Dark Mode) re-colours the rendered page *after* the cascade, which is why even an author
   * `!important` does not hold on screen. Those transforms do not apply to printed output, so
   * paper would come out right anyway — but a statement is the one document here that has to be
   * legible no matter what the reader's browser is doing to their screen, and near-white figures
   * on white paper is an invisible settlement. Browsers do not print background colours by
   * default either, so the dark card behind them would not rescue it.
   *
   * Stating both ends costs nothing and removes the question. `color-scheme: light` on the page
   * would settle it for the screen too, but that is a decision about the whole app's appearance
   * rather than about printing, and not this change's to make. */
  :root {
    color-scheme: light;
  }

  body,
  .card,
  .table,
  .table > :not(caption) > * > * {
    color: #000 !important;
    background-color: transparent !important;
  }

  /* The muted secondary text — crop type names beside a row, the "—" for a blank — has to stay
   * distinguishable from the figures without disappearing. */
  .text-body-secondary {
    color: #444 !important;
  }

  /* Card borders and table rules are the only structure left once the fills are gone. */
  .card {
    border-color: #999 !important;
  }

  .table > :not(caption) > * > * {
    border-color: #bbb !important;
  }

  /* The badges (contract status, "Stubbed price", "On"/"Off") are white-on-colour on screen,
   * which prints as white on nothing. */
  .badge {
    color: #000 !important;
    border: 1px solid #999;
  }
}