/* Result lookup and mark-sheet (FR-060, FR-061, FR-062 print; S-10, RPT-01).
   Responsive on screen from 320px; A4 landscape with 2 cm margins in print. */

/* ---------- Lookup form ---------- */

/* Honeypot: moved off-screen (not display:none, which some bots detect) and hidden from assistive technology. */
.result-lookup-trap {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Page toolbar ---------- */

.marksheet-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

/* ---------- Mark-sheet ---------- */

.marksheet {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1rem;
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
}

@media (min-width: 768px) {
  .marksheet {
    padding: 1.5rem 2rem;
  }
}

.marksheet-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--bs-emphasis-color);
}

/* If the logo file is missing the alt text shows in its place. */
.marksheet-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.marksheet-institute {
  flex: 1 1 12rem;
  min-width: 0;
}

.marksheet-institute-name {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.marksheet-institute-tagline {
  margin: 0;
  color: var(--bs-secondary-color);
}

.marksheet-photo {
  flex: 0 0 auto;
}

.marksheet-photo img,
.marksheet-photo-placeholder {
  display: block;
  width: 100px;
  height: 120px;
  border: 1px solid var(--bs-border-color);
}

.marksheet-photo img {
  object-fit: cover;
}

.marksheet-photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.25rem;
  font-size: 0.75rem;
  text-align: center;
  color: var(--bs-secondary-color);
  background-color: var(--bs-tertiary-bg);
}

.marksheet-title {
  margin: 1rem 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

.marksheet-historical {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--bs-warning-border-subtle);
  border-radius: 0.375rem;
  color: var(--bs-warning-text-emphasis);
  background-color: var(--bs-warning-bg-subtle);
}

.marksheet-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35rem 2rem;
  margin-bottom: 1.25rem;
}

@media (min-width: 576px) {
  .marksheet-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.marksheet-details > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.75rem;
}

.marksheet-details dt {
  flex: 0 0 9.5rem;
  font-weight: 600;
}

.marksheet-details dd {
  flex: 1 1 10rem;
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.marksheet-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}

@media (min-width: 992px) {
  .marksheet-body {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
}

.marksheet-table {
  margin-bottom: 1rem;
}

.marksheet-table caption {
  caption-side: top;
  padding-top: 0;
  font-weight: 700;
  color: var(--bs-body-color);
}

.marksheet-table th,
.marksheet-table td {
  vertical-align: top;
}

.marksheet-table th[scope="row"] {
  font-weight: 400;
  overflow-wrap: anywhere;
}

.marksheet-number {
  text-align: end;
  white-space: nowrap;
}

.marksheet-modules tfoot th,
.marksheet-modules tfoot td {
  font-weight: 700;
  border-top: 2px solid var(--bs-emphasis-color);
}

/* A blank grade (Fail in the default legend) shows a dash. */
.marksheet td[data-field="grade"]:empty::before,
.marksheet td[data-band-grade]:empty::before {
  content: "\2014";
}

.marksheet-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--bs-border-color);
  font-size: 0.9rem;
}

.marksheet-footer p {
  margin: 0;
}

.marksheet-note {
  font-style: italic;
}

/* ---------- Screen presentation on the public site (Sunrise) ----------
   Wrapped in "@media screen" so the A4 print rules below, which are deliberately plain and black on white,
   are never touched by these colours. The staff preview keeps the Bootstrap look of the admin portal. */

@media screen {
    .public-site .marksheet {
        padding: clamp(18px, 3vw, 32px);
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
        background-color: var(--paper);
        color: var(--body);
        box-shadow: var(--shadow-md);
    }

    .public-site .marksheet-header {
        gap: 16px;
        padding-bottom: 16px;
        border-bottom: 3px solid var(--sun-500);
    }

    .public-site .marksheet-institute-name {
        font-family: var(--font-head);
        font-size: 1.6rem;
        font-weight: 800;
        color: var(--ink);
    }

    .public-site .marksheet-institute-tagline {
        color: var(--muted);
        font-weight: 600;
    }

    .public-site .marksheet-title {
        margin: 18px 0;
        color: var(--sun-700);
        font-family: var(--font-head);
    }

    .public-site .marksheet-historical {
        border: 1px solid var(--lemon-100);
        border-radius: var(--r-sm);
        background-color: var(--lemon-100);
        color: var(--lemon-700);
    }

    .public-site .marksheet-details {
        padding: 16px;
        border-radius: var(--r-md);
        background: var(--sun-50);
    }

    .public-site .marksheet-details dt {
        color: var(--muted);
        font-family: var(--font-head);
    }

    .public-site .marksheet-details dd {
        color: var(--ink);
        font-weight: 700;
    }

    .public-site .marksheet-table caption {
        color: var(--ink);
        font-family: var(--font-head);
        font-size: 1.05rem;
    }

    .public-site .marksheet-table thead th {
        background: var(--sky-50);
        color: var(--sky-700);
        font-family: var(--font-head);
    }

    .public-site .marksheet-modules tfoot th,
    .public-site .marksheet-modules tfoot td {
        border-top: 2px solid var(--sun-500);
        color: var(--ink);
    }

    .public-site .marksheet-footer {
        border-top: 1px solid var(--line);
        color: var(--muted);
    }
}

/* ---------- Print: A4 landscape (FR-062, AC-061-2) ---------- */

/* Paged media only applies when printing. */
@page {
  size: A4 landscape;
  margin: 2cm;
}

@media print {
  html {
    font-size: 10.5pt;
  }

  body {
    color: #000;
    background: #fff;
  }

  /* Site chrome and page controls are not part of the sheet (the sheet's own header and footer stay). */
  header:not(.marksheet-header),
  footer:not(.marksheet-footer),
  .navbar,
  .breadcrumb,
  .skip-link,
  .d-print-none,
  .marksheet-toolbar,
  .validation-summary-valid {
    display: none !important;
  }

  main,
  main.container,
  main.container-fluid {
    max-width: none;
    margin: 0;
    padding: 0 !important;
  }

  .marksheet {
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #000;
    background: #fff;
  }

  .marksheet-header {
    border-bottom-color: #000;
  }

  .marksheet-details {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Block layout keeps table fragmentation reliable: the module table runs across pages with its header
     repeated, then the overall result and legend sit side by side. */
  .marksheet-body {
    display: block;
  }

  .marksheet-side {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .marksheet-side > table {
    flex: 1 1 0;
  }

  .marksheet-table,
  .marksheet-table th,
  .marksheet-table td {
    color: #000;
    background: #fff !important;
    border-color: #000 !important;
  }

  .marksheet-table thead {
    display: table-header-group;
  }

  /* Totals print once, after the last module. */
  .marksheet-table tfoot {
    display: table-row-group;
  }

  .marksheet-table tr,
  .marksheet-table th,
  .marksheet-table td {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .marksheet-header,
  .marksheet-title,
  .marksheet-details,
  .marksheet-historical,
  .marksheet-footer,
  .marksheet-status {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .marksheet-title {
    break-after: avoid;
    page-break-after: avoid;
  }

  /* The draft/withdrawn banner of the staff preview stays on the printout. */
  .marksheet-status {
    color: #000;
    background: #fff;
    border: 2px solid #000;
  }
}