/* Portal-only phone styles.
 *
 * Loaded by the portal's own templates (web/portal/*.html) after app.css, and
 * never by the standalone product, so nothing here can change the on-screen or
 * printed report card in cmd/schoolresults.
 *
 * The parent-facing pages must fit a 430 px phone without a sideways swipe.
 * The one wide element is the subject-breakdown table, so it is tightened here
 * and its Remark column is dropped on narrow screens — the Grade letter carries
 * the judgement, and the printed card keeps the full remark.
 */

@media (max-width: 560px) {
  main { padding: 10px; }
  .wrap { padding: 12px 12px 36px; }
  .card { padding: 12px; }
  header.top .brand { font-size: 17px; }
  .statline { gap: 12px; }
  .statline .stat { font-size: 20px; }

  .subj-table th:nth-child(7),
  .subj-table td:nth-child(7) { display: none; }

  .subj-table th,
  .subj-table td { padding: 5px 4px; font-size: 12px; }
  .subj-table th { font-size: 10.5px; letter-spacing: 0; }

  .subj-table th:first-child,
  .subj-table td:first-child { width: 22px !important; padding-left: 2px; padding-right: 2px; }

  .subj-table th:nth-child(6),
  .subj-table td:nth-child(6) { width: 40px !important; }

  .subj-table td.num,
  .subj-table th.num { width: 38px; }

  /* Safety net: if a school's subject names are still too wide, the table
     scrolls inside its own card rather than pushing the page sideways. */
  .scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------- staff pages ---------- *
 * The school's own side of the portal: sign in, students, score entry. These
 * classes are used only by web/portal/staff_*.html, never by the printed slip
 * or the parent pages.
 */

.staff-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 8px 18px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.staff-nav a {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 8px;
}
.staff-nav a:hover { background: #eef3f9; }
.staff-nav a.on { background: var(--navy); color: #fff; }
.staff-nav .spacer { flex: 1; }

.staff-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}
.mini { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.scoregrid input[type=text] { width: 74px; }
.scoregrid select { min-width: 92px; }
.grid-table td.sp { text-align: left; }

@media (max-width: 560px) {
  .staff-nav { padding: 6px 10px; }
  .staff-nav a { padding: 5px 7px; font-size: 12.5px; }
  .scoregrid input[type=text] { width: 52px; }
  .scoregrid select { min-width: 78px; font-size: 12px; padding: 6px 4px; }
  .grid-table th, .grid-table td { padding: 5px 5px; font-size: 12.5px; }
}

/* ---------- the printable result slip ---------- *
 * A parent can print or save the result as a PDF. On paper there is room, so
 * the Remark column the phone hides comes back, and the page becomes a plain
 * document: letterhead, details, table, verification block, signature line.
 * The verification QR is inlined by the server as a data URL, so nothing here
 * needs the parent's PIN.
 */

.print-only { display: none; }

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

  body { background: #fff; }
  header.top,
  .no-print,
  .screen-only { display: none !important; }
  main { padding: 0; }
  .wrap { max-width: none; padding: 0; }

  .print-only { display: block; }

  /* Paper has the room the phone did not: show the Remark column again. */
  .subj-table th:nth-child(7),
  .subj-table td:nth-child(7) { display: table-cell; }
  .subj-table th,
  .subj-table td { font-size: 11px; padding: 4px 6px; }
  .subj-table th { font-size: 10px; }
  .subj-table th:first-child,
  .subj-table td:first-child { width: 26px !important; }
  .subj-table th:nth-child(6),
  .subj-table td:nth-child(6) { width: 52px !important; }
  .subj-table td.num,
  .subj-table th.num { width: 52px; }
  .subj-table tbody tr:nth-child(even) { background: transparent; }

  .card {
    border: 1px solid #999;
    border-radius: 0;
    box-shadow: none;
    padding: 8px 10px;
    margin: 0 0 8px;
    page-break-inside: avoid;
  }
  .legend { font-size: 9.5px; color: #333; }
  h2 { font-size: 16px; }
  .statline .stat { font-size: 19px; }
  .stat small { font-size: 10px; }

  /* Letterhead */
  .slip-head {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 2px solid #000;
    padding-bottom: 6px;
    margin-bottom: 10px;
  }
  .slip-head .crest { width: 58px; height: 58px; object-fit: contain; }
  .slip-head .id { flex: 1; text-align: center; }
  .slip-head h1 {
    margin: 0; font-size: 19px; text-transform: uppercase;
    letter-spacing: .4px; color: #000;
  }
  .slip-head p { margin: 2px 0 0; font-size: 10.5px; color: #333; }
  .slip-head .motto { font-style: italic; }
  .slip-head .doc { font-weight: 700; font-size: 11px; letter-spacing: 1px; margin-top: 5px; }

  /* Verification block + signature line */
  .slip-foot {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-top: 1px solid #000;
    padding-top: 8px;
    margin-top: 10px;
  }
  .slip-foot .qr { width: 96px; height: 96px; }
  .slip-foot .vtext { flex: 1; font-size: 10px; }
  .slip-foot .vtext .url { font-family: monospace; font-size: 9.5px; word-break: break-all; }
  .slip-foot .sig { text-align: right; font-size: 10px; }
  .slip-foot .sig .line {
    border-top: 1px solid #000;
    margin-top: 26px;
    padding-top: 2px;
    min-width: 130px;
  }
  .slip-foot .sig .line small { display: block; color: #333; }

  /* Never print link URLs after link text. */
  a[href]:after { content: ""; }
}