/* ============================================================
   BARAEM GRADEFLOW — REPORT CENTRE
   Restrained academic styling. The document is meant to be printed and pinned
   to a noticeboard, so it uses a serif for headings, tabular figures for every
   number, and hairline rules instead of coloured panels. No gradients, no
   shadows in the printed document, no decorative graphics.

   The print rules are the important part: A4, real page breaks, a running
   header and a page number in the footer.
   ============================================================ */

.rp-wrap { --rp-ink: #14181d; --rp-mid: #5b6672; --rp-line: #d9dee3; --rp-soft: #f6f8fa; }

/* ---------- the builder screen ---------- */
.rp-head-bar {
  display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  padding: 0 0 14px; margin-bottom: 14px;
  border-bottom: 1px solid var(--an-line);
}
.rp-head-bar h1 { margin: 0; font-size: 1.25rem; font-weight: 750; letter-spacing: -.01em; color: var(--an-text); }
.rp-sub { margin: 3px 0 0; font-size: .82rem; color: var(--an-muted); }
.rp-actions { margin-inline-start: auto; display: flex; gap: 8px; }
.rp-actions .btn:disabled { opacity: .45; cursor: not-allowed; }

.rp-layout { display: grid; grid-template-columns: 290px 1fr; gap: 16px; align-items: start; }
.rp-panel {
  background: var(--an-bg); border: 1px solid var(--an-line); border-radius: 12px;
  padding: 14px; display: grid; gap: 11px; position: sticky; top: 12px;
}
.rp-build { width: 100%; justify-content: center; margin-top: 2px; }
.rp-note { font-size: .74rem; color: var(--an-bad); line-height: 1.5; }
.rp-stage { min-width: 0; }
.rp-doc-host { margin-top: 16px; }

/* ============================================================
   THE DOCUMENT
   ============================================================ */
.rp {
  background: #fff; color: var(--rp-ink);
  border: 1px solid var(--an-line); border-radius: 4px;
  padding: 34px 38px 30px;
  max-width: 940px; margin: 0 auto;
  font-size: 11.5pt; line-height: 1.55;
}

/* masthead */
.rp-head {
  display: flex; align-items: flex-start; gap: 16px;
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 2px solid var(--rp-ink);
}
.rp-brand { display: flex; align-items: center; gap: 11px; }
.rp-mark {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 3px;
  background: var(--rp-ink); color: #fff;
  display: grid; place-items: center;
  font-size: 13pt; font-weight: 800; letter-spacing: .02em;
}
.rp-org { font-size: 12.5pt; font-weight: 700; letter-spacing: -.01em; }
.rp-orgsub { font-size: 9.5pt; color: var(--rp-mid); margin-top: 1px; }
.rp-doc { margin-inline-start: auto; text-align: end; }
.rp-doctitle { font-size: 11pt; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.rp-docmeta { font-size: 9.5pt; color: var(--rp-mid); margin-top: 2px; }

/* The identification block is almost entirely figures (grade, academic year,
   report date). Pin its values LTR so a year never renders reversed. */
/* identification block: a plain definition grid, no boxes */
.rp-ident {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px 20px;
  margin: 0 0 20px; padding: 11px 0;
  border-top: 1px solid var(--rp-line); border-bottom: 1px solid var(--rp-line);
}
.rp-ident > div { display: flex; flex-direction: column; gap: 1px; }
.rp-ident dt { font-size: 8pt; text-transform: uppercase; letter-spacing: .05em; color: var(--rp-mid); }
.rp-ident dd { margin: 0; font-size: 10.5pt; font-weight: 650; }
.rp-ident.rtl-num dd { direction: ltr; unicode-bidi: isolate; text-align: end; }

/* sections */
.rp-sec { margin: 0 0 22px; }
.rp-sec > h2 {
  font-size: 10pt; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  color: var(--rp-ink); margin: 0 0 9px;
  padding-bottom: 5px; border-bottom: 1px solid var(--rp-line);
}
.rp-lede { margin: 0 0 12px; font-size: 11pt; line-height: 1.6; }

/* KPI strip: figures, not cards */
.rp-kpis {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0;
  border-top: 1px solid var(--rp-line); border-bottom: 1px solid var(--rp-line);
}
.rp-kpi { padding: 9px 10px; border-inline-end: 1px solid var(--rp-line); }
.rp-kpi:last-child { border-inline-end: 0; }
.rp-kpi-k { display: block; font-size: 8pt; text-transform: uppercase; letter-spacing: .05em; color: var(--rp-mid); }
.rp-kpi-v { display: block; font-size: 15pt; font-weight: 750; margin-top: 2px; font-variant-numeric: tabular-nums; }

/* tables */
.rp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.rp-tbl { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
.rp-tbl caption {
  caption-side: top; text-align: start; font-size: 8.5pt; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--rp-mid);
  padding-bottom: 5px;
}
.rp-tbl th, .rp-tbl td { padding: 5px 7px; border-bottom: 1px solid var(--rp-line); text-align: start; }
.rp-tbl th {
  font-size: 8pt; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--rp-mid); border-bottom: 1px solid var(--rp-ink);
}
.rp-tbl td.n, .rp-tbl th.n { text-align: end; font-variant-numeric: tabular-nums; }
.rp-tbl tbody tr:last-child td { border-bottom: 1px solid var(--rp-ink); }
.rp-tbl-sm { font-size: 8.5pt; }
.rp-tbl-sm th, .rp-tbl-sm td { padding: 3px 6px; }
.rp-tbl .up { color: #1c7a4a; font-weight: 700; }
.rp-tbl .muted { color: var(--rp-mid); font-size: .85em; font-style: italic; }
.rp-tbl .down { color: #b3261e; font-weight: 700; }

/* insights: numbered, with the figure that produced each one */
.rp-ins { margin: 0; padding-inline-start: 20px; }
.rp-ins li { margin-bottom: 8px; }
.rp-ins p { margin: 0; font-size: 10.5pt; }
.rp-ev {
  display: inline-block; margin-top: 2px; font-size: 8pt; color: var(--rp-mid);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.rp-foot {
  margin-top: 22px; padding-top: 10px; border-top: 1px solid var(--rp-line);
  font-size: 8.5pt; color: var(--rp-mid);
}

/* Arabic text sets bidi ordering for the whole run, and Western digits inside
   an RTL paragraph get re-ordered: "80.1" comes out as "1.08". Every figure in
   this document is a Western-digit number, so numeric runs are pinned to LTR.
   This applies on screen too, not only in print — the preview showed the same
   inversion. */
.rp .n, .rp .rp-kpi-v, .rp .rp-ev, .rp td.n, .rp th.n,
.rp .rp-ident dd, .rp caption { direction: ltr; unicode-bidi: isolate; }
.rp .rp-kpi, .rp .rp-split, .rp .rp-tbl tbody tr { unicode-bidi: isolate; }

/* ============================================================
   PRINT — A4, real pagination, running header and page number
   ============================================================ */
@media print {
  @page { size: A4 portrait; margin: 16mm 14mm 18mm; }

  html, body { background: #fff !important; }
  body * { visibility: hidden !important; }

  .rp, .rp * { visibility: visible !important; }

  /* The footer is position:fixed so it repeats on every page, which means it
     is also laid out over the document body in the extraction order. Reserve
     the space it occupies instead, so it never overlaps a table. */
  .rp-foot { position: static !important; }
  .rp-doc-host { position: static; }
  .rp-wrap { position: static; }
  #main, .main, .content { overflow: visible !important; height: auto !important; }

  /* exactly one report may print; if several are on screen, only the first */
  .rp { position: absolute; inset-block-start: 0; inset-inline-start: 0;
        width: 100%; max-width: none; margin: 0; padding: 0;
        border: 0; border-radius: 0; box-shadow: none; background: #fff;
        font-size: 10.5pt; color: #000; }

  /* the builder chrome never prints */
  .rp-head-bar, .rp-layout, .an-skel, .an-bar, .sidebar, .topbar,
  .toast, .modal, .rp-doc-host > .an-empty { display: none !important; }

  /* never split a heading from its table, or a row across pages */
  .rp-sec { break-inside: auto; page-break-inside: auto; margin-bottom: 16px; }
  .rp-sec > h2 { break-after: avoid; page-break-after: avoid; }
  .rp-tbl { break-inside: auto; page-break-inside: auto; }
  .rp-tbl thead { display: table-header-group; }        /* repeat headers */
  .rp-tbl tr { break-inside: avoid; page-break-inside: avoid; }
  .rp-kpis { break-inside: avoid; page-break-inside: avoid; }
  .rp-split { break-inside: avoid; page-break-inside: avoid; }
  .rp-ins li { break-inside: avoid; page-break-inside: avoid; }
  .rp-head { break-after: avoid; page-break-after: avoid; }
  .rp-ident { break-after: avoid; page-break-after: avoid; }

  /* A repeating footer and a page counter in the same element do not combine:
     position:fixed repeats the whole block, and the counter would then print
     once per page rather than once per document. Split them — the provenance
     line flows at the end, and the page number goes in @page's margin box,
     which is the only construct that reliably numbers pages. */
  .rp-foot {
    break-before: avoid; page-break-before: avoid;
    margin: 18px 0 0; padding-top: 8px;
    border-top: 1px solid #999;
  }
  @page {
    margin: 16mm 14mm 20mm;
    @bottom-center { content: counter(page) " / " counter(pages); font-size: 8pt; color: #666; }
  }

  a { color: #000; text-decoration: none; }
}

/* the class is set while printing so the on-screen preview can also be taken
   in isolation if a browser ever lacks @page support */
body.rp-printing .rp-head-bar,
body.rp-printing .rp-layout { opacity: .4; }

@media (max-width: 900px) {
  .rp-layout { grid-template-columns: 1fr; }
  .rp-panel { position: static; }
  .rp { padding: 22px 18px; }
  .rp-ident { grid-template-columns: repeat(2, 1fr); }
  .rp-kpis { grid-template-columns: repeat(3, 1fr); }
  .rp-kpi:nth-child(3n) { border-inline-end: 0; }
  .rp-split { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 560px) {
  .rp-kpis { grid-template-columns: repeat(2, 1fr); }
  .rp-kpi:nth-child(3n) { border-inline-end: 1px solid var(--rp-line); }
  .rp-kpi:nth-child(2n) { border-inline-end: 0; }
  .rp-head { flex-direction: column; gap: 8px; }
  .rp-doc { margin-inline-start: 0; text-align: start; }
}