/* Results & Report Cards (School ERP 3.2.82). Scoped to [data-gap-module="report-cards"];
   the dialogs appended to <body> carry .rc-dlg, and the printed cards .rcd-*. The page
   itself is the ERP's own heading, metric cards, workflow cards and panels, so this file
   only styles what is particular to the module: the entry grids, the status line, the
   chips. Screen colours come from the ERP tokens so dark mode follows; paper stays paper. */

/* ------------------------------------------------------------- the page */
[data-gap-module="report-cards"] .rc-scope { margin: 0 0 14px; }
[data-gap-module="report-cards"] .rc-scope .form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
[data-gap-module="report-cards"] .rc-pane .form-note { margin: 0 0 12px; }
[data-gap-module="report-cards"] .rc-check { display: flex !important; align-items: center; gap: 8px; }
[data-gap-module="report-cards"] .rc-wrap,
[data-gap-module="report-cards"] .data-table td { overflow-wrap: anywhere; }
[data-gap-module="report-cards"] .rc-muted { opacity: .6; }
[data-gap-module="report-cards"] .rc-chip { display: inline-block; max-width: 100%; margin: 1px 2px; padding: 2px 8px; border-radius: 999px; color: var(--brand-ink); background: var(--brand-soft); font-size: 11px; font-weight: 700; overflow-wrap: anywhere; }
[data-gap-module="report-cards"] .rc-bands { display: inline-flex; flex-wrap: wrap; gap: 2px; }
[data-gap-module="report-cards"] .rc-component-list { display: grid; gap: 6px; margin: 0; padding-left: 16px; font-size: 12px; }
[data-gap-module="report-cards"] .rc-competencies { display: grid; gap: 4px; margin: 0; padding-left: 18px; font-size: 12px; }
[data-gap-module="report-cards"] .rc-competencies li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; padding: 3px 0; border-bottom: 1px dashed var(--line); }
[data-gap-module="report-cards"] .rc-competencies li > span:first-child { flex: 1 1 200px; min-width: 0; }
/* An emptied stack inside a drawer group (its cards went to the drawer) takes no room. */
[data-gap-module="report-cards"] .drawer-group > .workflow-stack:empty { display: none; }

/* The publication register's filters: the workspace's own bar, and the class picker beside it. */
[data-gap-module="report-cards"] .rc-register-filter { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); background: var(--surface-sunken); }
[data-gap-module="report-cards"] .rc-register-filter > .register-filter { flex: 1 1 280px; min-width: 0; border-bottom: 0; background: transparent; }
[data-gap-module="report-cards"] .rc-register-filter .person-picker label { flex: 1 1 150px; min-width: 0; }

/* The term form's components and the scale form's bands, inside the numbered sections. */
[data-gap-module="report-cards"] .rc-components,
.rc-dlg .rc-components { display: grid; gap: 10px; }
.rc-component { display: grid; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); }
.rc-component .rc-component-title { color: var(--brand-ink); font-size: 12px; font-weight: 800; }
.rc-component > button { justify-self: end; }
.rc-exam-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 4px 12px; max-height: 180px; overflow-y: auto; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 12px; }
.rc-exam-picks label { min-width: 0; overflow-wrap: anywhere; }
.rc-exam-picks small { color: var(--muted); }
.rc-total { margin: 0; color: var(--muted); font-size: 12px; text-align: right; }
.rc-total b { color: var(--brand-ink); font-size: 16px; }
.rc-inline-actions { justify-content: flex-start !important; }
.rc-edit-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 12px; }
.rc-edit-table th { padding: 6px; color: var(--muted); font-size: 11px; text-align: left; }
.rc-edit-table td { padding: 4px 6px; border-top: 0; }
.rc-edit-table input { width: 100%; min-width: 60px; }

/* The entry grids: a class down the rows, the areas or the fields across. */
[data-gap-module="report-cards"] .rc-grid { width: 100%; border-collapse: collapse; font-size: 12px; }
[data-gap-module="report-cards"] .rc-grid th { padding: 7px 8px; border-bottom: 1px solid var(--line); color: var(--muted); background: color-mix(in srgb, var(--canvas) 70%, var(--surface)); font-size: 11px; font-weight: 750; text-align: left; vertical-align: bottom; }
[data-gap-module="report-cards"] .rc-grid td { padding: 6px 8px; border-top: 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 12px; vertical-align: top; }
[data-gap-module="report-cards"] .rc-grid th small,
[data-gap-module="report-cards"] .rc-grid td small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; font-weight: 600; }
[data-gap-module="report-cards"] .rc-grid tbody tr:hover { background: color-mix(in srgb, var(--brand-soft) 40%, var(--surface)); }
[data-gap-module="report-cards"] .rc-grid-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
[data-gap-module="report-cards"] .rc-grid input,
[data-gap-module="report-cards"] .rc-grid select,
[data-gap-module="report-cards"] .rc-grid textarea { width: 100%; min-width: 64px; min-height: 34px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--surface); font: inherit; font-size: 12px; }
[data-gap-module="report-cards"] .rc-grid input:focus,
[data-gap-module="report-cards"] .rc-grid select:focus,
[data-gap-module="report-cards"] .rc-grid textarea:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
[data-gap-module="report-cards"] .rc-grid--remarks .rc-remark-cell { min-width: 260px; }
[data-gap-module="report-cards"] .rc-grid--remarks textarea { resize: vertical; }
[data-gap-module="report-cards"] .rc-remark-cell select { margin-top: 4px; color: var(--muted); }
[data-gap-module="report-cards"] .rc-fill-row th { padding-top: 0; }
[data-gap-module="report-cards"] .rc-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-gap-module="report-cards"] .rc-low { color: var(--danger); font-weight: 750; }
[data-gap-module="report-cards"] .rc-results td:nth-child(2) { min-width: 150px; }
[data-gap-module="report-cards"] .rc-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); }
[data-gap-module="report-cards"] .rc-status > span:not(.record-status) { flex: 1 1 200px; min-width: 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
[data-gap-module="report-cards"] .rc-flow-actions { flex-wrap: wrap; }
[data-gap-module="report-cards"] .rc-legend { margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
[data-gap-module="report-cards"] .rc-legend span { color: var(--ink); font-weight: 750; }
[data-gap-module="report-cards"] .rc-level-key,
.rc-dlg .rc-level-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 12px; color: var(--muted); font-size: 11px; }
[data-gap-module="report-cards"] .rc-level-key b,
.rc-dlg .rc-level-key b { color: var(--brand-ink); }

/* ---------------------------------------------------------------- dialogs */
.rc-dlg .rc-dialog-form { display: grid; gap: 12px; }
.rc-dlg .rc-check { display: flex !important; align-items: center; gap: 8px; }
.rc-dlg .rc-grid-wrap { max-width: 100%; overflow-x: auto; }
.rc-hpc-dialog .rc-hpc-part { margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.rc-hpc-dialog .rc-hpc-part > summary { cursor: pointer; color: var(--brand-ink); font-weight: 800; }
.rc-hpc-dialog .rc-about { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 10px; }
.rc-hpc-dialog .rc-about textarea,
.rc-hpc-dialog .rc-hpc-notes textarea { width: 100%; resize: vertical; }
.rc-hpc-dialog .rc-hpc-domain { min-width: 0; margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); }
.rc-hpc-dialog .rc-hpc-domain legend { padding: 0 6px; color: var(--ink); font-weight: 800; }
.rc-hpc-dialog .rc-hpc-domain legend small { color: var(--muted); font-weight: 600; }
/* The ERP's screen rule gives every table a 760px minimum; this one lives in a dialog. */
.rc-hpc-dialog .rc-level-table { width: 100%; min-width: 0; border-collapse: collapse; font-size: 12px; }
.rc-hpc-dialog .rc-level-table td { padding: 6px 4px; border-top: 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 12px; vertical-align: middle; overflow-wrap: anywhere; }
.rc-hpc-dialog .rc-levels { white-space: nowrap; }
.rc-hpc-dialog .rc-level { display: inline-flex; align-items: center; gap: 4px; margin: 2px 8px 2px 0; padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer; }
.rc-hpc-dialog .rc-level:has(input:checked) { border-color: var(--brand); color: var(--brand-ink); background: var(--brand-soft); font-weight: 750; }
.rc-hpc-dialog .rc-hpc-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.rc-hpc-dialog .rc-hpc-notes label { display: grid; gap: 4px; font-size: 11px; font-weight: 700; }
@media (max-width: 760px) {
  .rc-hpc-dialog .rc-about,
  .rc-hpc-dialog .rc-hpc-notes { grid-template-columns: 1fr; }
  .rc-hpc-dialog .rc-levels { white-space: normal; }
  [data-gap-module="report-cards"] .rc-grid--remarks .rc-remark-cell { min-width: 200px; }
}

/* ---------------------------------------------------------- printed paper
   A report card and a Holistic Progress Card are the ERP's own documents
   (genericDocumentHtml: letterhead, meta rows, signature footer), one per
   .rcd-page, inside the shared .jpraxc-document-stack. The ERP's screen rule for
   tables (reference-layout.css) gives every table a 760px minimum, 13px cells and
   spaced uppercase headings: 760px is wider than the 174mm inside the A4 page,
   and that minimum is what pushed the HPC's twelve-month table and its
   competency tables past the page's right edge. Every table here is sized by the
   page instead: width 100%, fixed layout, text that wraps. */
.rcd-stack { --rcd-ink: #1d1819; --rcd-muted: #5f5658; --rcd-rule: #cfc7c5; }
/* The same template, set tighter: a full report card — eight subjects, two terms of
   four components, five co-scholastic areas — is one A4 sheet. */
.rcd-page { max-width: 194mm; }
.rcd-page .jpraxc-generic-document { max-width: 194mm; padding: 7mm 8mm; color: var(--rcd-ink); font-size: 7.2pt; line-height: 1.28; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.rcd-page .jpraxc-generic-document > header { gap: 4mm; padding-bottom: 2.5mm; border-bottom-width: 1mm; }
.rcd-page .jpraxc-generic-document > header img { width: 15mm; height: 15mm; }
.rcd-page .jpraxc-generic-document > header > div { min-width: 0; }
.rcd-page .jpraxc-generic-document > header h1 { overflow-wrap: anywhere; font-size: 13pt; line-height: 1.15; }
.rcd-page .jpraxc-generic-document > header p { margin-top: .6mm; font-size: 7pt; line-height: 1.3; }
.rcd-page .jpraxc-generic-document .school-letterhead-contact { margin-top: .6mm; }
.rcd-page .jpraxc-generic-document .school-letterhead-contact-item { font-size: 6.6pt; }
.rcd-page .generic-document-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2mm; margin: 2.5mm 0 1.5mm; }
.rcd-page .generic-document-meta > div { min-width: 0; padding: .8mm 1.8mm; border-radius: 1.5mm; }
.rcd-page .generic-document-meta span { font-size: 5.8pt; }
.rcd-page .generic-document-meta strong { margin-top: .4mm; overflow-wrap: anywhere; font-size: 7.4pt; line-height: 1.2; }
.rcd-page .jpraxc-generic-document > main { min-width: 0; }
.rcd-page .generic-reference { padding: .8mm 2.4mm; font-size: 6.4pt; }
.rcd-page .jpraxc-generic-document > main h2 { margin: 1.2mm 0 2mm; font-size: 11.5pt; }
.rcd-page .jpraxc-generic-document > footer { padding-top: 1mm; }
.rcd-page .jpraxc-generic-document > footer i { height: 6mm; }
.rcd-page .jpraxc-generic-document > footer span { margin-top: 1mm; font-size: 7pt; }
.rcd-page .jpraxc-generic-document > small { margin-top: 1.5mm; padding-top: 1mm; font-size: 6pt; }
.rcd-body { display: grid; gap: 2mm; min-width: 0; max-width: 100%; }
.rcd-body > * { min-width: 0; max-width: 100%; }
.rcd-summary { display: flex; gap: 2.5mm; align-items: stretch; min-width: 0; }
.rcd-summary > .rcd-box { flex: 1 1 0; min-width: 0; margin: 0; }
.rcd-summary > .rcd-table { flex: 1.35 1 0; min-width: 0; align-self: start; }
.rcd-photo { flex: 0 0 20mm; width: 20mm; height: 24mm; object-fit: cover; border: .35mm solid var(--doc-primary, #7a1f2b); border-radius: 1.5mm; }
.rcd-photo--blank { display: grid; place-items: center; color: #8a8183; background: #f4f1f0; font-size: 6pt; }

.rcd-table { width: 100%; min-width: 0; max-width: 100%; table-layout: fixed; border-collapse: collapse; margin: 0; font-variant-numeric: tabular-nums; }
.rcd-table th,
.rcd-table td { padding: .75mm 1mm; border: .25mm solid var(--rcd-rule); color: var(--rcd-ink); background: transparent; font-size: 7pt; font-weight: 600; line-height: 1.25; letter-spacing: 0; text-align: center; text-transform: none; vertical-align: middle; white-space: normal; overflow-wrap: anywhere; word-break: normal; }
.rcd-table tbody tr:hover { background: transparent; }
.rcd-table thead th { color: var(--doc-secondary, #4a1520); background: color-mix(in srgb, var(--doc-primary, #7a1f2b) 8%, #fff); font-size: 6.1pt; font-weight: 850; line-height: 1.15; -webkit-hyphens: auto; hyphens: auto; }
.rcd-table thead th span,
.rcd-table thead th small { display: block; }
.rcd-table thead th small { color: var(--rcd-muted); font-size: 5.6pt; font-weight: 700; }
.rcd-table .rcd-subject { text-align: left; font-weight: 800; }
.rcd-table tbody th.rcd-subject { color: var(--rcd-ink); background: #fbfaf9; font-size: 7pt; }
.rcd-table td small { color: var(--rcd-muted); font-size: 5.8pt; }
/* Column widths: the label column wider, the rest shared equally. */
.rcd-marks col.rcd-col-subject { width: 28mm; }
.rcd-marks col.rcd-col-total { width: 10.5mm; }
.rcd-marks col.rcd-col-grade { width: 7.5mm; }
.rcd-marks > thead > tr:last-child > th { padding: .6mm .45mm; font-size: 5.7pt; }
.rcd-compact > thead > tr > th:first-child { width: 36%; }
.rcd-attendance > thead > tr > th:first-child { width: 28%; }
.rcd-hpc > thead > tr > th:first-child { width: 46%; }
.rcd-hpc th.rcd-subject { font-weight: 700; }
.rcd-hpc td b { display: block; color: var(--doc-secondary, #4a1520); }
.rcd-hpc td small { display: block; }
.rcd-hpc td.rcd-text { text-align: left; white-space: pre-wrap; }
/* Up to fourteen months across 174mm: a compact face, the year under the month. */
.rcd-table.rcd-months > thead > tr > th:first-child { width: 17mm; }
.rcd-table.rcd-months th,
.rcd-table.rcd-months td { padding: .7mm .35mm; font-size: 5.8pt; }
.rcd-table.rcd-months thead th small { font-size: 5pt; }
.rcd-total { font-weight: 850 !important; }
.rcd-grade { color: var(--doc-secondary, #4a1520) !important; font-weight: 850 !important; }
.rcd-na { background: #f3f1f0 !important; }
.rcd-foot td, .rcd-foot th { background: color-mix(in srgb, var(--doc-primary, #7a1f2b) 5%, #fff) !important; font-weight: 850; }
.rcd-columns { display: flex; gap: 2.5mm; align-items: flex-start; min-width: 0; }
.rcd-columns > * { flex: 1 1 0; min-width: 0; }
.rcd-box { min-width: 0; min-height: 11mm; padding: 1.6mm 2.4mm; border: .3mm solid var(--rcd-rule); border-radius: 1.5mm; }
.rcd-box h3 { margin: 0 0 1mm; color: var(--doc-secondary, #4a1520); font-size: 7pt; letter-spacing: .04em; text-transform: uppercase; }
.rcd-box p { margin: .6mm 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.rcd-result { border-color: var(--doc-primary, #7a1f2b); background: color-mix(in srgb, var(--doc-primary, #7a1f2b) 4%, #fff); }
.rcd-result-label { color: var(--doc-secondary, #4a1520); font-size: 11pt; font-weight: 900; }
.rcd-small { color: var(--rcd-muted); font-size: 6pt; }
.rcd-legend { color: var(--rcd-muted); font-size: 5.9pt; line-height: 1.45; overflow-wrap: anywhere; }
.rcd-legend p { margin: .3mm 0; }
.rcd-legend b { color: var(--rcd-ink); }
.rcd-signatures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20mm; padding: 5mm 6mm 0; }
.rcd-signatures div { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.rcd-signatures i { width: 100%; border-top: .25mm solid #4b4445; }
.rcd-signatures span { margin-top: 1mm; font-size: 6.6pt; font-weight: 800; }
.rcd-signatures small { color: var(--rcd-muted); font-size: 6pt; overflow-wrap: anywhere; }
.rcd-part { margin: 1.2mm 0 0; padding: 1mm 2mm; color: #fff; background: var(--doc-primary, #7a1f2b); font-size: 7.4pt; letter-spacing: .05em; text-transform: uppercase; break-after: avoid; }
.rcd-domain { min-width: 0; break-inside: avoid; }
.rcd-domain h4 { margin: 1mm 0; color: var(--doc-secondary, #4a1520); font-size: 7.6pt; overflow-wrap: anywhere; break-after: avoid; }
.rcd-about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5mm; }
.rcd-about { min-width: 0; min-height: 11mm; padding: 1.5mm 2mm; border: .25mm solid var(--rcd-rule); border-radius: 1.2mm; break-inside: avoid; }
.rcd-about span { display: block; color: var(--doc-primary, #7a1f2b); font-size: 5.8pt; font-weight: 850; letter-spacing: .03em; text-transform: uppercase; }
.rcd-about p { margin: .6mm 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.rcd-level-key { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5mm; padding: 1.5mm 2mm; border: .25mm dashed var(--rcd-rule); border-radius: 1.2mm; font-size: 6.4pt; }
.rcd-level-key > span { grid-column: 1 / -1; color: var(--doc-secondary, #4a1520); font-weight: 850; }
.rcd-level-key p { min-width: 0; margin: 0; overflow-wrap: anywhere; }

/* Black & white: the whole palette redefined to black on white, as every ERP print does. */
.jpraxc-print-mono .rcd-page { --brand: #000; --brand-deep: #000; --brand-ink: #000; --brand-soft: #fff; --ink: #000; --muted: #000; --line: #000; --doc-primary: #000; --doc-secondary: #000; --rcd-ink: #000; --rcd-muted: #000; --rcd-rule: #000; }
.jpraxc-print-mono .rcd-page * { color: #000 !important; }
.jpraxc-print-mono .rcd-page .jpraxc-generic-document { border-color: #000; background: #fff; }
.jpraxc-print-mono .rcd-page .jpraxc-generic-document > header img,
.jpraxc-print-mono .rcd-photo { filter: grayscale(1) contrast(1.3); }
.jpraxc-print-mono .rcd-page .generic-reference { background: #fff; box-shadow: inset 0 0 0 .25mm #000; }
.jpraxc-print-mono .rcd-part { background: #fff; box-shadow: inset 0 0 0 .3mm #000; }
.jpraxc-print-mono .rcd-table thead th,
.jpraxc-print-mono .rcd-table tbody th.rcd-subject,
.jpraxc-print-mono .rcd-foot td,
.jpraxc-print-mono .rcd-foot th,
.jpraxc-print-mono .rcd-na,
.jpraxc-print-mono .rcd-result,
.jpraxc-print-mono .rcd-photo--blank { background: #fff !important; }
.jpraxc-print-mono .rcd-photo { border-color: #000; }

@media print {
  /* v3.css prints every generic document with 10mm padding (!important); these keep their own. */
  .rcd-page .jpraxc-generic-document { padding: 7mm 8mm !important; }
  .rcd-page { break-after: page; page-break-after: always; }
  .rcd-page:last-child { break-after: auto; page-break-after: auto; }
  .rcd-table tr { break-inside: avoid; }
}