/* ══════════════════════════════════════════════════════════════════════════
   result.css — Gnoke College
   Dedicated print / preview stylesheet for report cards and broadsheets.
   Loaded by: print.html, clteach.html
   Never edit sch.css for result-specific rules — keep them here.
   ══════════════════════════════════════════════════════════════════════════ */


/* ── 1. BASE RESET FOR RESULT SURFACES ── */
.report-card,
.report-card *,
.broadsheet,
.broadsheet * {
  box-sizing: border-box;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}


/* ── 2. REPORT CARD SHELL ── */
.report-card {
  background: #fff;
  font-family: 'Times New Roman', Times, serif;
  font-size: 9.5pt;
  color: #000;
  line-height: 1.35;
  /* Screen preview: contained, centred, shadowed */
  max-width: 210mm;
  margin: 0 auto 20px;
  padding: 8mm 7mm 7mm;
  box-shadow: 0 2px 16px rgba(0,0,0,.14);
  border-radius: 3px;
}


/* ── 3. SCHOOL HEADER ── */
.rc-school-name {
  text-align: center;
  font-size: 14pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 2.5px double #000;
  padding-bottom: 4px;
  margin-bottom: 3px;
}

.rc-subtitle {
  text-align: center;
  font-size: 8.5pt;
  color: #333;
  margin-bottom: 7px;
  text-transform: uppercase;
  letter-spacing: .07em;
}


/* ── 4. META ROWS (class / term / session / name) ── */
.rc-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border: 1px solid #000;
  padding: 3px 7px;
  margin-bottom: 2px;
  font-size: 8.5pt;
  flex-wrap: nowrap;
  gap: 4px;
}
.rc-meta-row span        { flex: 1; white-space: nowrap; }
.rc-meta-row span + span { text-align: center; }
.rc-meta-row span:last-child { text-align: right; }

.rc-name-row {
  border: 1px solid #000;
  border-top: none;
  padding: 4px 7px;
  margin-bottom: 5px;
  font-size: 9.5pt;
  font-weight: 700;
  text-transform: uppercase;
}


/* ── 5. SCORES TABLE ── */
.rc-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 5px;
  table-layout: fixed;
}

.rc-table th,
.rc-table td {
  border: 1px solid #000;
  padding: 2.5px 4px;
  font-size: 7.8pt;
  text-align: center;
  vertical-align: middle;
  word-break: break-word;
  overflow-wrap: break-word;
}

.rc-table th {
  background: #f0f0f0;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 7pt;
  line-height: 1.2;
}

.rc-table .social-th  { background: #e8e8e8; }

.rc-table td.subj {
  text-align: left;
  font-weight: 600;
  font-size: 8pt;
  padding-left: 5px;
}

.rc-table td.total-col { font-weight: 700; }
.rc-table td.grade-col { font-weight: 700; }

.rc-table .rc-grade-key {
  font-size: 7pt;
  background: #f5f5f5;
}

/* Tfoot total row */
.rc-table tfoot td {
  font-weight: 700;
  font-size: 8pt;
  background: #f9f9f9;
}


/* ── 6. FOOTER SUMMARY STRIP ── */
.rc-footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid #000;
  border-top: none;
  margin-bottom: 5px;
}

.rc-footer-cell {
  padding: 3px 6px;
  border-right: 1px solid #000;
  font-size: 7.8pt;
  vertical-align: top;
}
.rc-footer-cell:last-child { border-right: none; }

.rc-footer-label {
  font-weight: 700;
  font-size: 7pt;
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px;
}

.rc-footer-val {
  font-size: 8.5pt;
  min-height: 13px;
  display: block;
}


/* ── 7. COMMENT ROWS ── */
.rc-comment-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  border: 1px solid #000;
  border-top: none;
  padding: 4px 6px;
  font-size: 7.8pt;
  min-height: 22px;
  flex-wrap: nowrap;
}

.rc-comment-label {
  font-weight: 700;
  white-space: nowrap;
  text-transform: uppercase;
  font-size: 7pt;
  min-width: 140px;
  flex-shrink: 0;
  padding-top: 2px;
}

.rc-comment-line {
  flex: 1;
  font-size: 7.8pt;
  color: #222;
  line-height: 1.5;
  padding-bottom: 2px;
  border-bottom: 1px solid #aaa;
  min-height: 14px;
  /* Allow long comments to wrap */
  word-break: break-word;
  overflow-wrap: break-word;
}

.rc-sign {
  white-space: nowrap;
  font-size: 7pt;
  font-weight: 700;
  margin-left: 6px;
  flex-shrink: 0;
  padding-top: 2px;
}

.rc-sign-line {
  display: inline-block;
  width: 55px;
  border-bottom: 1px solid #000;
  margin-left: 3px;
}


/* ── 8. BROADSHEET ── */
.broadsheet {
  width: 100%;
  background: #fff;
  margin: 0 auto 20px;
  box-shadow: 0 2px 16px rgba(0,0,0,.14);
  font-family: 'Times New Roman', Times, serif;
  font-size: 8pt;
  color: #000;
  overflow-x: auto;
  border-radius: 3px;
}

.bs-header {
  text-align: center;
  padding: 7px 10px 3px;
  border-bottom: 2px solid #000;
}

.bs-school {
  font-size: 12pt;
  font-weight: 700;
  text-transform: uppercase;
}

.bs-sub {
  font-size: 7.5pt;
  color: #444;
  margin-top: 2px;
}

.bs-meta {
  display: flex;
  justify-content: space-between;
  padding: 3px 10px;
  font-size: 7.5pt;
  border-bottom: 1px solid #000;
  flex-wrap: wrap;
  gap: 8px;
}

table.bs-table {
  width: 100%;
  border-collapse: collapse;
}

table.bs-table th,
table.bs-table td {
  border: 1px solid #aaa;
  padding: 3px 4px;
  font-size: 7.5pt;
  text-align: center;
  vertical-align: middle;
}

table.bs-table th {
  background: #f0f0f0;
  font-weight: 700;
  font-size: 7pt;
  text-transform: uppercase;
}

table.bs-table td.sn-col   { color: #888; width: 28px; }
table.bs-table td.name-col {
  text-align: left;
  padding-left: 6px;
  font-weight: 600;
  white-space: nowrap;
  min-width: 130px;
}
table.bs-table td.total-col { font-weight: 700; }
table.bs-table td.pos-col   { font-weight: 700; color: #166534; }

.grade-A-p { color: #15803d; }
.grade-B-p { color: #1d4ed8; }
.grade-C-p { color: #b45309; }
.grade-D-p { color: #7c3aed; }
.grade-F-p { color: #b91c1c; }


/* ── 9. MOBILE RESPONSIVE ── */
@media screen and (max-width: 600px) {

  .report-card {
    padding: 5mm 4mm 4mm;
    font-size: 8.5pt;
    border-radius: 2px;
    /* Full bleed on small screens — no side margins */
    margin-left: -14px;
    margin-right: -14px;
    max-width: calc(100% + 28px);
    box-shadow: 0 1px 8px rgba(0,0,0,.12);
  }

  .rc-school-name  { font-size: 11pt; }
  .rc-subtitle     { font-size: 7.5pt; }
  .rc-meta-row     { font-size: 7.5pt; padding: 2px 5px; }
  .rc-name-row     { font-size: 8.5pt; padding: 3px 5px; }

  /* Scores table: hide social traits + grading key columns on mobile
     to prevent overflow. They are visible on print. */
  .rc-table th.social-th,
  .rc-table td.social-col,
  .rc-table th.rc-grade-key,
  .rc-table td.rc-grade-key {
    display: none;
  }

  .rc-table th,
  .rc-table td      { padding: 2px 3px; font-size: 7pt; }
  .rc-table td.subj { font-size: 7.2pt; min-width: 70px; }

  .rc-footer               { grid-template-columns: repeat(3, 1fr); }
  .rc-footer-cell          { padding: 2px 4px; }
  .rc-footer-label         { font-size: 6.5pt; }
  .rc-footer-val           { font-size: 7.8pt; }

  .rc-comment-row          { flex-wrap: wrap; gap: 4px; padding: 3px 5px; }
  .rc-comment-label        { min-width: 100px; font-size: 6.5pt; }
  .rc-comment-line         { font-size: 7.2pt; width: 100%; }
  .rc-sign                 { font-size: 6.5pt; }
  .rc-sign-line            { width: 44px; }

  .broadsheet { font-size: 7pt; }
  table.bs-table th,
  table.bs-table td { padding: 2px 3px; font-size: 6.5pt; }
}


/* ── 10. PRINT MEDIA ── */

/*
   Mobile WebKit print strategy:
   - .print-rc-wrap must be visible via CLASS toggle, not inline style
   - Everything else hidden via class .no-print
   - @page margin:10mm on mobile prevents blank-page bleed
   - break-inside:avoid on rows prevents mid-row page breaks
*/

/* Class applied to body during print via JS — hides the app shell */
body.printing > *:not(#print-rc-wrap) {
  display: none !important;
}
body.printing #print-rc-wrap {
  display: block !important;
  position: static !important;
}

@media print {
  @page {
    size: A4 portrait;
    margin: 10mm;
  }

  /* Hide everything except the print wrapper */
  body > *:not(#print-rc-wrap) {
    display: none !important;
  }

  #print-rc-wrap {
    display: block !important;
    position: static !important;
  }

  .report-card {
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 0 0 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    page-break-after: always;
    break-after: page;
    font-size: 9pt;
  }

  /* Prevent row splits across pages */
  .rc-table tbody tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Restore social traits + grading key columns hidden on mobile */
  .rc-table th.social-th,
  .rc-table td.social-col,
  .rc-table th.rc-grade-key,
  .rc-table td.rc-grade-key {
    display: table-cell !important;
  }

  .rc-school-name { font-size: 13pt; }
  .rc-meta-row    { font-size: 8pt; }
  .rc-name-row    { font-size: 9pt; }
  .rc-table th,
  .rc-table td    { font-size: 7.5pt; padding: 2px 3px; }

  .rc-footer-label { font-size: 6.5pt; }
  .rc-footer-val   { font-size: 8pt; }
  .rc-comment-label { font-size: 6.5pt; }
  .rc-comment-line  { font-size: 7.5pt; }

  .broadsheet {
    box-shadow: none !important;
    overflow: visible !important;
  }
  table.bs-table th,
  table.bs-table td { font-size: 7pt; padding: 2px 3px; }
}