/* ============================================================
   REPORTS

   The table itself is ListView's — .tbl, .lv-*, the toolbar, the filters.
   This file adds only what a REPORT has that a working list does not: a
   picker, a heading that says what you are looking at, and a print layout,
   because a report is a thing you hand to somebody.
   ============================================================ */

.rp-intro { margin-bottom: 22px; }
.rp-h1 { font-family: var(--disp); font-weight: 800; font-size: 26px; letter-spacing: -.01em;
         margin: 0 0 6px; }
.rp-lede { font-size: 14px; color: var(--ink-soft); line-height: 1.6; max-width: 74ch; margin: 0; }

/* ---------- the picker ---------- */
.rp-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.rp-card { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit;
  background: rgba(255,255,255,.6); border: 1px solid var(--stroke-soft); border-radius: var(--r-lg);
  padding: 16px 17px 14px; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.rp-card:hover { border-color: var(--gold); transform: translateY(-2px);
  box-shadow: 0 8px 24px -16px rgba(26,27,24,.4); }
.rp-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.rp-card-h { display: flex; align-items: center; gap: 9px; font-family: var(--disp);
  font-weight: 700; font-size: 16px; }
.rp-card-h svg { width: 18px; height: 18px; color: var(--gold-deep); flex: 0 0 18px; }
.rp-card-b { font-size: 13px; color: var(--ink-soft); line-height: 1.55; flex: 1; }
.rp-card-f { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-faint); }

/* ---------- one report ---------- */
.rp-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.rp-head > div:first-child { flex: 1; min-width: 260px; }
.rp-head-a { display: flex; gap: 8px; }

/* A second line inside a cell — the legal name under the operating name,
   the NOC under the job title. Quieter than the value it belongs to, so a
   column still reads as one column. */
.rp-strong { font-weight: 650; }
.rp-sub { font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; line-height: 1.4; }

/* ---------- the Action Required flag ----------
   One pill per row, carrying the answer the firm asked for: the expiry read
   together with the current status and anything already submitted. The five
   values are long strings by design — they are sentences, not codes — so
   the pill wraps rather than stretching the column, and the two "no action"
   values are deliberately quiet: a row nobody has to chase should not read
   as loudly as one they must. */
.rp-flag { white-space: normal; display: inline-block; line-height: 1.35; max-width: 22ch;
  text-align: left; }
.rp-flag-maintained, .rp-flag-visitor { opacity: .85; }
/* The renewal line is the one that keeps an employer on the report without
   keeping them on the chase list, so it is not as faint as a plain sub-line. */
.rp-renewal { color: var(--ink-soft); }

@media (max-width: 820px) {
  .rp-flag { max-width: none; }
}

/* ---------- print ----------
   Only the report survives: no sidebar, no toolbar, no filter chips, no
   buttons. What is left is a titled table on white, which is what a client
   or a colleague can be sent. The filters that produced it stay applied,
   because printing what is on screen is the whole contract of the button. */
.rp-print-head { display: none; }

@media print {
  @page { margin: 13mm; }

  /* styles.css sets `body > * { display: none !important }` for print — the
     app's existing mechanism, which prints a `.print-root` element and
     nothing else. A report is not a document rendered into that element,
     it is the screen itself; so printing one turns on a body class and
     re-admits the app shell, with a specificity that beats the global
     rule rather than editing it. Everything inside the shell that is a
     CONTROL rather than the report is then hidden. */
  body.rp-printing > * { display: none !important; }
  body.rp-printing > .app { display: block !important; }

  body.rp-printing { background: #fff !important; overflow: visible !important; }
  body.rp-printing .app { height: auto !important; display: block !important; }
  body.rp-printing .main { display: block !important; }
  body.rp-printing .view { overflow: visible !important; height: auto !important;
    padding: 0 !important; animation: none !important; }

  body.rp-printing .side,
  body.rp-printing .topbar,
  body.rp-printing .lv-toolbar,
  body.rp-printing .toolrow,
  body.rp-printing .rp-head-a,
  body.rp-printing .pwa-bar,
  body.rp-printing .toast,
  body.rp-printing .mb-tabbar,
  /* The government-links bar and its alert strip are navigation, and they
     were printing above the report's own title. */
  body.rp-printing .gv-bar,
  body.rp-printing .gv-alertwrap { display: none !important; }

  .rp-print-head { display: block !important; margin-bottom: 12px; padding-bottom: 8px;
    border-bottom: 2px solid #1E3A33; }
  .rp-print-firm { font-family: var(--disp); font-weight: 800; font-size: 15px; color: #1E3A33; }
  .rp-print-title { font-size: 19px; font-weight: 700; margin-top: 2px; }
  .rp-print-meta { font-size: 10.5px; color: #6A685F; margin-top: 3px; }

  body.rp-printing .rp-head { display: block; margin-bottom: 8px; }
  body.rp-printing .rp-head .rp-h1 { display: none; }
  body.rp-printing .rp-head .rp-lede { font-size: 10.5px; color: #6A685F; max-width: none; }

  body.rp-printing .tbl-wrap { overflow: visible !important; border: 0 !important;
    background: none !important; border-radius: 0 !important; }
  body.rp-printing table.tbl { width: 100% !important; font-size: 9.5px !important;
    border-collapse: collapse; }
  body.rp-printing table.tbl th { background: #F4F0E9 !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    border-bottom: 1px solid #1A1B18 !important; padding: 4px 6px !important; }
  body.rp-printing table.tbl td { padding: 4px 6px !important;
    border-bottom: 1px solid rgba(26,27,24,.12) !important; }
  /* Half a row at the foot of a page is a row somebody misreads. */
  body.rp-printing table.tbl tr { break-inside: avoid; page-break-inside: avoid; }
  body.rp-printing thead { display: table-header-group; }

  /* Pills carry meaning here — overdue, expired, over the cap — so they keep
     their colour on paper instead of printing as grey on grey. */
  body.rp-printing .pill { border: 1px solid currentColor !important; background: none !important;
    padding: 1px 5px !important; font-size: 9px !important; }
  body.rp-printing .rp-sub { font-size: 8.5px !important; }
  /* A link on paper is just text. */
  body.rp-printing .lv-link { color: inherit !important; text-decoration: none !important;
    border: 0 !important; background: none !important; padding: 0 !important; font: inherit !important; }
}