/* ===========================================================================
   JACRA Backoffice - print
   ---------------------------------------------------------------------------
   Linked from index.html with media="print", so nothing here touches the
   screen rendering and the whole file can be reasoned about as one document.

   The prototype shipped a live @page{size:A4 landscape;margin:0} - residue from
   the pitch deck the file grew out of. It applied to every print of the actual
   app, so a schedule came out sideways, bled off the sheet, and stopped after
   one page because the desktop shell is a fixed-height grid whose only scroller
   is .view-desktop > .content: everything below the fold was simply clipped.

   This is the real thing. Portrait A4, app chrome and controls removed, and the
   content released from the scroll trap so it paginates.

   Specificity note: every rule is anchored on .app, scoring at least 0,2,0.
   That beats the single-class rules in layout.css and mobile.css on merit, so
   the sheet does not depend on link order or on a priority flag. It also
   matters more than it looks: an A4 portrait page box is ~794 CSS px wide, so
   the 860px mobile breakpoint *does* match while printing, and these rules have
   to outrank it deliberately rather than by luck.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   Page box
   --------------------------------------------------------------------------- */

@page{
  size: A4 portrait;
  margin: 14mm 12mm;
}


/* ---------------------------------------------------------------------------
   Document
   --------------------------------------------------------------------------- */

html,
body{
  background: var(--white);
  color: var(--ink);

  /* Points, not pixels: the sheet is a physical medium. */
  font-size: 10.5pt;
  line-height: 1.4;

  /* The shell locks these on screen; a printed document has no viewport. */
  width: auto;
  height: auto;
  min-height: 0;
  overflow: visible;
}

/* Loose single lines stranded at a page break read as errors. */
p,
li,
dd{
  orphans: 3;
  widows: 3;
}


/* ---------------------------------------------------------------------------
   Release the scroll trap

   On screen: .app is a fixed-height grid, .main and .view clip, and .content is
   the one scroller. On paper every one of those has to become an ordinary
   block that grows to its content and lets the page break fall where it may.
   --------------------------------------------------------------------------- */

.app{
  display: block;
  height: auto;
  min-height: 0;
  overflow: visible;
  background: var(--white);
}

.app .main,
.app .view,
.app .content,
.app .panel,
.app .panel-b{
  display: block;
  height: auto;
  max-height: none;
  min-height: 0;
  overflow: visible;
}

.app .content{
  padding: 0;
  background: var(--white);
}

/* Only the routed screen prints. .screen.is-active scores 0,2,0 in layout.css,
   so the override needs the extra class to win outright. */
.app .screen{
  display: none;
}
.app .screen.is-active{
  display: block;
}

/* Print the desktop view: it carries the full roster grid, the kanban and the
   tables. The mobile view is a summary of the same data and would duplicate it.
   Both rules score 0,2,0 and so beat the 860px breakpoint that a portrait page
   box would otherwise trigger. */
.app .view-desktop{
  display: block;
}
.app .view-mobile{
  display: none;
}


/* ---------------------------------------------------------------------------
   Chrome and controls

   Navigation is meaningless on paper, and so is anything you cannot click.
   --------------------------------------------------------------------------- */

.app .side,
.app .bottombar,
.app .tb-tools,
.app .tb-search,
.app button,
.app .btn,
.app .icon-btn,
.app .mini-btn,
.app .seg,
.app .fchip{
  display: none;
}

/* The topbar stays - it holds the screen's h1 and subtitle - but stops being a
   fixed-height bar and becomes the document's masthead. */
.app .topbar{
  display: block;
  height: auto;
  min-height: 0;
  padding: 0 0 var(--s-3);
  margin: 0 0 var(--s-5);
  border-bottom: 1px solid var(--gray-300);
  background: var(--white);
}
.app .tb-title{
  display: block;
}
.app .tb-sub{
  margin-top: var(--s-1);
  color: var(--gray-600);
}

/* A toolbar's controls are hidden individually above rather than the bar as a
   whole, because some screens put a count or a caption in the same row and that
   is worth printing. Dropping the flex layout stops the leftovers being
   stretched across the column. */
.app .tbar{
  display: block;
  margin: 0 0 var(--s-4);
}


/* ---------------------------------------------------------------------------
   Surfaces

   Shadows print as grey mud on every consumer printer. Borders carry the same
   grouping information at a fraction of the toner.
   --------------------------------------------------------------------------- */

.app .card,
.app .panel,
.app .kcard,
.app .kpi{
  box-shadow: none;
  background: var(--white);
  /* --gray-200 is near-invisible on paper; step the border up one. */
  border: 1px solid var(--gray-300);
}

/* Keep a record whole across a page break where it plausibly fits on one. */
.app .card,
.app .panel,
.app .kcard,
.app .kpi,
.app .empty{
  break-inside: avoid;
}

/* A heading stranded at the foot of a page is worse than a short page. */
.app h1,
.app h2,
.app h3{
  break-after: avoid;
}


/* ---------------------------------------------------------------------------
   Kanban

   On screen .kb is a flex row of independently scrolling lanes. Four lanes side
   by side on a 186mm text column would be unreadable, and a lane's own overflow
   would clip it at one page, so the board prints as stacked sections.
   --------------------------------------------------------------------------- */

.app .kb{
  display: block;
  height: auto;
  min-height: 0;
  overflow: visible;
}

.app .kcol{
  display: block;
  height: auto;
  max-height: none;
  min-height: 0;
  overflow: visible;
  margin: 0 0 var(--s-5);
  break-inside: auto;
}


/* ---------------------------------------------------------------------------
   Colour

   Browsers drop backgrounds when printing, which is right for our tinted
   panels and wrong for status badges: strip the ground from a badge and
   "High" and "Low" become the same word in the same grey. These are the only
   elements allowed to force their colour onto the page.
   --------------------------------------------------------------------------- */

.app .bdg,
.app .b-high,
.app .b-med,
.app .b-low,
.app .dot{
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}