/* Printable sow card. Renders as a paper-style preview on screen and
   one card per page on paper. See app/views/print/. */
@layer components {
  /* Force light, paper colours regardless of dark mode — these card pages are
     only ever meant for paper (mirrors Fizzy's print.css :root override). */
  .print-body {
    --color-ink: black;
    --color-ink-darker: black;
    --color-ink-dark: #333;
    --color-ink-medium: #555;
    --color-ink-light: #777;
    --color-ink-lighter: #999;
    --color-ink-lightest: #ccc;
    --color-canvas: white;

    background: white;
    color: black;

    /* Opt out of the app's body grid (display:grid; 100dvh rows; overflow:hidden).
       Without this, at >=640px the toolbar lands in the 1fr/100dvh row and stretches
       to full-page height, and overflow:hidden clips the card footer. */
    block-size: auto;
    display: block;
    max-inline-size: none;
    min-block-size: 0;
    overflow: visible;
  }

  /* Screen-only controls — printing has no Ctrl+P on mobile, and the page has no
     app chrome. Hidden when actually printing. */
  .print-toolbar {
    background: var(--color-canvas);
    border-block-end: 1px solid var(--color-ink-lighter);
    display: flex;
    gap: var(--inline-space);
    /* Grouped at the start so both controls stay on-screen on mobile, where the
       fixed-width viewport is wider than the phone screen. */
    justify-content: flex-start;
    padding: var(--block-space-half) var(--inline-space);
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
  }

  /* Desktop has Ctrl+P and a browser back button, so hide those controls on
     hover-capable devices — but keep the language picker, which has no native
     equivalent. */
  @media (any-hover: hover) {
    .print-toolbar__back,
    .print-toolbar__print {
      display: none;
    }
  }

  /* Print toolbar dropdowns (language, cycle limit): native <details> menus,
     screen-only (the whole toolbar is hidden in @media print). */
  .print-toolbar__dropdown {
    position: relative;
  }

  /* Pushes itself and any following dropdowns to the toolbar's trailing edge. */
  .print-toolbar__dropdown--end {
    margin-inline-start: auto;
  }

  .print-toolbar__dropdown > summary {
    cursor: pointer;
    list-style: none;
  }

  .print-toolbar__dropdown > summary::-webkit-details-marker {
    display: none;
  }

  .print-toolbar__dropdown-menu {
    background: var(--color-canvas);
    border: 1px solid var(--color-ink-lighter);
    inset-block-start: calc(100% + var(--block-space-half));
    inset-inline-end: 0;
    list-style: none;
    margin: 0;
    min-inline-size: 100%;
    padding: var(--block-space-half) 0;
    position: absolute;
    z-index: 2;
  }

  .print-toolbar__dropdown-item {
    align-items: center;
    display: flex;
    gap: var(--inline-space-half);
    padding: var(--block-space-half) var(--inline-space);
    white-space: nowrap;

    @media (any-hover: hover) {
      &:hover {
        background: var(--color-ink-lightest);
      }
    }
  }

  .print-toolbar__dropdown-item[aria-current="true"] {
    font-weight: 700;
  }

  .print {
    /* Fixed width (not max-inline-size) so the A4-wide card never shrinks to fit a
       narrow phone viewport — it stays full size and the user pans/scrolls. */
    inline-size: 200mm;
    margin-inline: auto;
    padding: var(--block-space);
  }

  .sow-card {
    break-inside: avoid;
    break-after: page;
    display: flex;
    flex-direction: column;
    margin-block-end: var(--block-space-double);
  }

  /* On screen the card is 200mm wide (.print); 200 × 297/210 ≈ 283mm keeps it
     A4-proportioned so the bottom-pinned QR block previews like the printout. */
  .print .sow-card {
    min-block-size: 283mm;
  }

  .sow-card:last-child {
    break-after: auto;
    margin-block-end: 0;
  }

  /* The decorative frame is a separate box so the page itself can have a zero
     margin (which suppresses the browser's print header/footer) while the visible
     border stays inset from the printer's non-printable edge. */
  .sow-card__frame {
    border: 2px solid var(--color-ink);
    /* Fill the card's full height so .sow-card__actions can be pushed to the
       bottom with its auto top margin. */
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: var(--block-space);
  }

  .sow-card__header {
    align-items: flex-start;
    border-block-end: 2px solid var(--color-ink);
    display: flex;
    gap: var(--inline-space);
    justify-content: space-between;
    margin-block-end: var(--block-space);
    padding-block-end: var(--block-space-half);
  }

  .sow-card__heading {
    flex: 1;
    min-inline-size: 0;
  }

  /* HogPoint brand at the top-left of every card. */
  .sow-card__brand {
    align-items: center;
    display: flex;
    gap: var(--inline-space-half);
    margin-block-end: var(--block-space);
  }

  .sow-card__logo {
    block-size: 8mm;
    inline-size: auto;
  }

  .sow-card__brand-name {
    font-size: var(--text-large);
    font-weight: 700;
  }

  /* Tag number stacked above the QR in the top-right corner. */
  .sow-card__identity {
    align-items: flex-end;
    display: flex;
    flex: none;
    flex-direction: column;
    gap: var(--block-space-half);
    text-align: end;
  }

  .sow-card__qr {
    block-size: 28mm;
    flex: none;
    inline-size: 28mm;
  }

  /* Bottom-corner scan shortcuts: "?" = look up the active cycle, "!" = report an event. */
  .sow-card__actions {
    align-items: flex-end;
    display: flex;
    justify-content: space-between;
    /* Soak up the slack between the grid and here, pinning the scan QR codes
       (and the footer that follows) to the bottom of the page. */
    margin-block-start: auto;
  }

  .sow-card__action {
    align-items: center;
    display: flex;
    gap: var(--inline-space-half);
  }

  .sow-card__qr--small {
    block-size: 20mm;
    inline-size: 20mm;
  }

  .sow-card__action-mark {
    font-size: var(--text-x-large);
    font-weight: 700;
    line-height: 1;
  }

  /* Free-text animal notes, boxed between the two scan QR codes. */
  .sow-card__notes {
    align-self: stretch;
    border: 1px solid var(--color-ink-medium);
    flex: 1;
    font-size: var(--text-small);
    margin-inline: var(--inline-space-double);
    overflow: hidden;
    padding: var(--inline-space-half) var(--inline-space);
    white-space: pre-wrap;
  }

  .sow-card__title {
    font-size: var(--text-xxx-large);
    font-weight: 700;
    margin: 0;
  }

  .sow-card__facts {
    display: grid;
    gap: var(--block-space-half) var(--inline-space-double);
    grid-template-columns: repeat(3, 1fr);
  }

  /* Second fact row: birth date under Age (col 2), identification under
     Entry date (col 3). */
  .sow-card__fact-birth {
    grid-column: 2;
  }

  .sow-card__fact-id {
    grid-column: 3;
  }

  .sow-card__facts dt {
    color: var(--color-ink-light);
    font-size: var(--text-x-small);
    text-transform: uppercase;
  }

  .sow-card__facts dd {
    font-size: var(--text-normal);
    font-weight: 600;
    margin: 0;
  }

  .sow-card__facts dd.sow-card__unit {
    font-size: var(--text-xx-large);
  }

  /* Lifetime cycle averages — mirrors the summary on animals#show. */
  /* 6 columns = 3 label/value pairs; values share grid columns so they align. */
  .sow-card__stats {
    align-items: baseline;
    display: grid;
    grid-template-columns: repeat(3, auto 1fr);
    column-gap: var(--inline-space-half);
    row-gap: var(--block-space-half);
    margin-block-start: var(--block-space);
  }

  .sow-card__stats dt {
    color: var(--color-ink-light);
    font-size: var(--text-x-small);
    text-transform: uppercase;
  }

  .sow-card__stats dt::after {
    content: ":";
  }

  .sow-card__stats dd {
    font-weight: 600;
    margin: 0;
  }

  .sow-card__grid {
    border-collapse: collapse;
    inline-size: 100%;
    table-layout: fixed;
  }

  .sow-card__grid th,
  .sow-card__grid td {
    border: 1px solid var(--color-ink-medium);
    /* Tight vertical padding so 10 cycles + blank row fit on one A4 sheet;
       horizontal padding keeps columns legible. */
    padding: calc(var(--block-space) / 3) var(--inline-space-half);
    line-height: 1.2;
    text-align: start;
  }

  .sow-card__grid th {
    font-size: var(--text-x-small);
    text-transform: uppercase;
  }

  /* Additional weanings (nursing-sow foster batches) under their cycle row. */
  .sow-card__grid-weaning td {
    color: var(--color-ink-light);
  }

  /* Blank row left open for hand-writing the next cycle. */
  .sow-card__grid-blank td {
    block-size: 2em;
  }

  .sow-card__footer {
    color: var(--color-ink-light);
    font-size: var(--text-x-small);
    margin-block-start: var(--block-space-half);
    text-align: end;
  }

  .sow-card__empty {
    color: var(--color-ink-light);
    padding: var(--block-space);
    text-align: center;
  }

  /* Zero page margin so Chrome/Edge/Safari have nowhere to draw their own
     header/footer (title, date, URL, "page X of Y") — the only CSS lever that
     removes them. The whitespace they'd occupy is re-added as card padding below. */
  @page {
    margin: 0;
    size: A4 portrait;
  }

  @media print {
    .print-toolbar {
      display: none;
    }

    .print {
      inline-size: auto;
      max-inline-size: none;
      padding: 0;
    }

    /* Each card is its own page (break-after: page); padding — unlike a top margin —
       is kept at a forced page break, so every sheet gets the same printer-safe inset. */
    .sow-card {
      box-sizing: border-box;
      margin: 0;
      /* Fill the printable page (with @page margin:0, 100vh is the full A4 box)
         so the auto-margin on .sow-card__actions has slack to push into. */
      min-block-size: 100vh;
      padding: 12mm;
    }

    /* Background colours/borders must be honoured by the printer. */
    .sow-card__frame,
    .sow-card__grid th,
    .sow-card__grid td {
      print-color-adjust: exact;
      -webkit-print-color-adjust: exact;
    }
  }
}