/* ================================================================ tag sheet
   This screen is a print preview. What comes off the printer is a physical
   thing that gets cut up and wrapped onto an earth cylinder, so the labels
   themselves are dimensioned in millimetres and are NOT restyled here — an
   18mm QR at 0.62mm per module is what makes a tag readable under a wet
   headtorch at 3am, and prettiness does not get a vote on that.

   What is designed here is everything around them: the sheet reads as paper
   laid on the page rather than a white rectangle bleeding out of it, each
   group says what it is and what size it prints at, and the print output
   carries enough identity to be recognised once it is off the screen.
   -------------------------------------------------------------------- */

.sheet {
  margin: 0 0 22px;
}

/* the bar above each group: what these are, and what they print at */
.sheet-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 9px 11px;
  margin: 0 0 11px;
}
.sheet-bar h3 {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: 12px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: #7f9086;
}
.sheet-size {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 999px;
  font-family: var(--font-mono, monospace);
  font-size: 10.5px; font-weight: 600; letter-spacing: .4px;
  background: rgba(47, 227, 106, .13);
  border: 1px solid rgba(47, 227, 106, .36);
  color: #6bffa0;
}
.sheet-count {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .13);
  color: #b8c6bd;
}
.sheet-sub {
  flex: 1 1 100%;
  margin: -3px 0 0;
  font-size: 12.5px; line-height: 1.5; color: #8fa094;
}
.sheet-sub b { color: #c2d0c6; font-weight: 700; }

/* the paper. A white block straight on the dark page looks like a rendering
   fault; framed and shadowed it reads as a sheet about to come out of a
   printer, which is what it is. */
.sheet-paper {
  padding: 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
  overflow-x: auto;
}
.sheet-paper .tag-grid,
.sheet-paper .strip-grid {
  padding: 0; border-radius: 0; background: transparent;
}

/* identity on the printed sheet. On screen it is noise; on paper it is the
   difference between a sheet of tags and an unlabelled sheet of tags. */
.print-head { display: none; }

/* ------------------------------------------------------------- the note */
.tag-note {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0; padding: 14px 15px;
  border-radius: 15px;
  font-size: 13px; line-height: 1.55; color: #c2d0c6;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .11);
}
.tag-note svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; color: #6bffa0; }
.tag-note b { color: #eef3ee; font-weight: 700; }
.tag-note p { margin: 0 0 7px; }
.tag-note p:last-child { margin-bottom: 0; }

@media (max-width: 400px) {
  .sheet-paper { padding: 11px; border-radius: 14px; }
  .sheet-bar { gap: 7px 9px; }
}

/* ===================================================================== print
   Everything that is screen furniture goes; the paper loses its frame and
   becomes the page. Colour adjustment is forced because a browser that
   "saves ink" by dropping backgrounds turns a black-on-white barcode into a
   barcode on nothing.
   -------------------------------------------------------------------- */
@media print {
  @page { margin: 10mm; }

  html, body { background: #fff !important; color: #000 !important; }

  header.app, .tabs, .tab-more, .appbar-menu, .no-print,
  #staleNote, .toast, .modal-bg, .page-head, .watch, .queued-note {
    display: none !important;
  }

  #main { padding: 0 !important; }
  .wrap { padding: 0 !important; max-width: none !important; }

  /* the sheet is the page now */
  .sheet { margin: 0 0 6mm; break-inside: avoid; }
  .sheet-bar { display: none !important; }
  .sheet-paper {
    padding: 0; border: 0; border-radius: 0; background: #fff;
    box-shadow: none; overflow: visible;
  }

  .print-head {
    display: block;
    margin: 0 0 3mm;
    font-family: var(--font-mono, monospace);
    font-size: 3mm; font-weight: 700; letter-spacing: .2mm;
    color: #000;
  }

  /* a label must never be split across two sheets of paper */
  .tag-label, .strip { break-inside: avoid; page-break-inside: avoid; }

  /* print exactly what is on screen: no ink-saving, no dropped fills */
  .tag-label, .strip, .tag-grid, .strip-grid, .sheet-paper, .print-head {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}