/* ============================================================
   Internship report generator — form + printable A4 report
   ============================================================ */

/* Any class that sets `display` outranks the UA's `[hidden] { display: none }`,
   which silently breaks every `el.hidden = true` on this page. */
[hidden] { display: none !important; }

.report-page { background: var(--bg-alt); min-height: 100vh; }

/* ---------- Form ---------- */
.rp-form-wrap { max-width: 860px; margin: 0 auto; padding: 44px 24px 80px; }
.rp-intro { text-align: center; margin-bottom: 36px; }
.rp-intro h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); margin-bottom: 14px; }
.rp-intro p { max-width: 620px; margin: 0 auto 10px; }
.rp-privacy {
  font-size: 0.85rem; color: #15803D; font-weight: 700;
  background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 999px;
  padding: 8px 18px; display: inline-block; margin-top: 8px;
}

.rp-form fieldset {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; padding: 24px 26px 10px; margin: 0 0 20px;
}
.rp-form legend {
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--orange-500); padding: 0 10px;
}
.rp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.rp-grid .form-row { margin-bottom: 16px; }
.req { color: var(--orange-500); }
.rp-hint { font-size: 0.86rem; margin-bottom: 14px; }

.rp-logo-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.rp-file {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  border: 1.5px dashed var(--border); border-radius: 12px; padding: 14px 20px;
  font-size: 0.9rem; font-weight: 700; color: var(--navy-700); background: var(--bg-alt);
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}
.rp-file:hover { border-color: var(--orange-500); background: var(--orange-050); }
.rp-file svg { width: 20px; height: 20px; color: var(--orange-500); }
.rp-file input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.rp-logo-preview { display: flex; align-items: center; gap: 12px; }
.rp-logo-preview img {
  height: 64px; width: auto; max-width: 160px; object-fit: contain;
  border: 1px solid var(--border); border-radius: 8px; padding: 6px; background: #fff;
}
.rp-generate { width: 100%; margin-top: 6px; }

/* ---------- Action bar ---------- */
.rp-actions {
  position: sticky; top: 0; z-index: 50;
  background: #fff; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm);
  padding: 14px 24px 10px;
}
.rp-actions-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.rp-actions-inner strong { display: block; font-size: 0.98rem; }
.rp-actions-inner span { font-size: 0.84rem; color: var(--ink-muted); }
.rp-actions-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.rp-print-hint {
  max-width: 1100px; margin: 8px auto 0; font-size: 0.78rem; color: var(--ink-muted); text-align: center;
}

/* ============================================================
   The report — A4 portrait pages (210 x 297 mm)
   ============================================================ */
.report {
  --page-w: 794px;    /* 210mm @ 96dpi */
  --page-h: 1123px;   /* 297mm @ 96dpi */
  display: block; padding: 30px 16px 60px;
}

/* ============================================================
   College formatting guidelines (strictly applied):
     Font          Times New Roman
     Normal text   12 pt      Subheadings  14 pt
     Headings      16 pt      Special      18 pt
     Colour        black only, no bold/italic/underline in body text
     Line spacing  1.5
     Margins       left 1.5 cm, top/bottom/right 1 cm
   Screen padding below mirrors those margins at 96 dpi
   (1 cm = 37.8 px, 1.5 cm = 56.7 px).
   ============================================================ */
.report .page {
  width: var(--page-w);
  min-height: var(--page-h);
  margin: 0 auto 28px;
  background: #fff;
  box-shadow: var(--shadow-lg);
  padding: 38px 38px 38px 57px;
  box-sizing: border-box;
  position: relative;
  font-family: 'Times New Roman', Times, serif;
  color: #000;
  font-size: 12pt;
  line-height: 1.5;
  text-align: justify;
}

/* ---------- Report typography ---------- */
.report .page h2,
.report .page h3,
.report .page h4 { font-family: 'Times New Roman', Times, serif; color: #000; }

.report .ch-num {
  text-align: center; font-size: 16pt; font-weight: 700; letter-spacing: 0.1em;
  color: #000; margin: 0 0 6px; line-height: 1.5;
}
.report .ch-heading {                       /* chapter title — "special case" */
  text-align: center; font-size: 18pt; font-weight: 700; letter-spacing: 0.02em;
  margin: 0 0 10px; color: #000; line-height: 1.4;
}
.report .cp-rule {                          /* plain black rule, no brand colour */
  width: 160px; height: 1.5px; background: #000;
  margin: 0 auto 20px;
}
.report h3 {                                /* section heading — 16 pt */
  font-size: 16pt; font-weight: 700; margin: 18px 0 8px; color: #000;
  text-align: left; line-height: 1.4;
  page-break-after: avoid; break-after: avoid;
}
.report h4 {                                /* subheading — 14 pt */
  font-size: 14pt; font-weight: 700; margin: 14px 0 6px; color: #000;
  text-align: left; line-height: 1.4;
  page-break-after: avoid; break-after: avoid;
}
.report .cp-body {
  margin: 0 0 11px; color: #000;
  font-size: 12pt; line-height: 1.5;        /* guideline: normal text */
}

/* Guideline: no bold or italic in body text. Neutralised here rather than
   stripped from the HTML, so emphasis can be restored by deleting this rule
   if another college allows it. The inserted certificate is exempt. */
.report .page:not(.cert-reserved) strong,
.report .page:not(.cert-reserved) b,
.report .page:not(.cert-reserved) em,
.report .page:not(.cert-reserved) i {
  font-weight: inherit;
  font-style: normal;
}
/* headings keep their weight */
.report .page h3 strong, .report .page h4 strong,
.report .page .ch-heading strong, .report .page th strong { font-weight: 700; }

.report code {
  font-family: 'Courier New', Courier, monospace; font-size: 11pt;
  background: transparent; padding: 0; color: #000;
}

.report .cp-list { margin: 0 0 11px; padding-left: 26px; list-style: disc; }
.report .cp-list li { margin-bottom: 5px; padding-left: 2px; }
.report .cp-ol { list-style: decimal; }

/* Code listings — plain, black, monospace */
.report .code-block {
  font-family: 'Courier New', Courier, monospace; font-size: 10.5pt;
  line-height: 1.35; white-space: pre-wrap; margin: 8px 0 12px;
  padding: 8px 10px; border: 1px solid #000; color: #000;
  text-align: left; page-break-inside: avoid; break-inside: avoid;
}
.report .fig-caption {
  text-align: center; font-size: 11pt; margin: 0 0 14px; color: #000;
}

/* ---------- Tables ---------- */
.report .data-table {
  width: 100%; border-collapse: collapse; margin: 8px 0 14px; font-size: 11.5pt;
  line-height: 1.4; page-break-inside: avoid; break-inside: avoid;
}
.report .data-table th, .report .data-table td {
  border: 1px solid #000; padding: 5px 8px; text-align: left; vertical-align: top;
}
.report .data-table thead th { background: transparent; font-weight: 700; color: #000; }
.report .data-table tbody th { background: transparent; font-weight: 700; width: 34%; }

.report .toc { width: 100%; border-collapse: collapse; font-size: 12pt; margin-top: 8px; line-height: 1.5; }
.report .toc th {
  text-align: left; border-bottom: 1.5px solid #000; padding: 6px 8px;
  font-weight: 700; color: #000;
}
.report .toc td { padding: 5px 8px; border-bottom: 1px solid #999; }
.report .toc td:first-child { width: 90px; }

/* ---------- Title page ----------
   Selector must be at least as specific as `.report .page { text-align: justify }`
   above, or every line without its own alignment inherits justify and a
   single-line heading renders flush left instead of centred. */
.report .title-page,
.report .title-page > * {
  text-align: center;
}
.title-page { display: flex; flex-direction: column; align-items: center; }
.tp-logo { min-height: 10px; margin-bottom: 14px; }
.tp-logo img { max-height: 110px; max-width: 240px; object-fit: contain; }
.tp-univ {
  font-size: 15pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--navy-700); margin: 0 0 20px;
}
.tp-sub { font-size: 12.5pt; margin: 0 0 8px; font-style: italic; }
.tp-title {
  font-size: 21pt; font-weight: 700; margin: 0 0 14px; color: var(--navy-700); line-height: 1.3;
}
.tp-at { font-size: 12pt; margin: 0 0 6px; font-style: italic; }
.tp-company {
  font-size: 15pt; font-weight: 700; color: var(--orange-500); margin: 0 0 22px; letter-spacing: 0.03em;
}
.tp-company-sub {
  display: block; font-size: 11pt; font-weight: 400; color: #444; letter-spacing: 0; margin-top: 2px;
}
.tp-body { font-size: 12pt; margin: 0 0 6px; text-align: center; }
.tp-degree { font-size: 15pt; font-weight: 700; margin: 4px 0 6px; color: #111; }
.tp-degree-sm { font-size: 13pt; font-weight: 700; margin: 0 0 24px; color: #111; }
.tp-by { font-size: 12pt; font-style: italic; margin: 0 0 6px; }
.tp-name {
  font-size: 18pt; font-weight: 700; margin: 0 0 2px; color: var(--navy-700); letter-spacing: 0.02em;
}
.tp-usn { font-size: 13pt; font-weight: 700; margin: 0 0 26px; letter-spacing: 0.06em; }
.tp-guide { margin-bottom: 30px; }
.tp-guide-name { font-size: 14pt; font-weight: 700; margin: 4px 0 2px; }
.tp-guide-desig { font-size: 11.5pt; margin: 0; }
.tp-college { margin-top: auto; border-top: 2px solid var(--orange-500); padding-top: 16px; width: 100%; }
.tp-college-name { font-size: 14pt; font-weight: 700; margin: 0 0 3px; color: var(--navy-700); }
.tp-place { font-size: 12pt; margin: 0 0 3px; }
.tp-year { font-size: 12pt; font-weight: 700; margin: 0; }

/* ---------- Certificate pages ---------- */
/* Same specificity note as the title page above. */
.report .cert-page { text-align: center; }
.report .cert-page .cp-body { text-align: justify; }
.cp-logo { min-height: 10px; margin-bottom: 16px; }
.cp-logo img { max-height: 76px; max-width: 260px; object-fit: contain; margin: 0 auto; }
.cp-heading {
  font-size: 17pt; font-weight: 700; letter-spacing: 0.14em;
  color: var(--navy-700); margin: 10px 0 10px;
}
/* Font size and line height deliberately NOT set here — they would override
   the college guideline values (12 pt / 1.5) inherited from .report .page. */
.cp-body { text-align: justify; margin: 0 0 11px; }
.cert-page .cp-body { text-indent: 0; }
.cp-list { text-align: left; margin: 0 0 16px; padding-left: 26px; list-style: disc; }
.cp-list li { margin-bottom: 6px; }

/* ---------- Page 2 — certificate ---------- */
.cert-reserved { display: flex; align-items: center; justify-content: center; }
.cert-reserved.has-content { display: block; }

.embed-caption {
  text-align: center; font-size: 14pt; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--navy-700); margin: 0 0 18px;
}
.embed-note {
  text-align: center; font-size: 9.5pt; color: #666; font-style: italic; margin: 16px 0 0;
}

/* The certificate is A4 landscape; build it at natural size then scale it
   down to the portrait page's content width. */
.cert-embed-scaler { display: flex; justify-content: center; }
.mini-cert {
  width: 1122px; height: 793px; flex: 0 0 auto;
  background: #fff; position: relative; overflow: hidden;
  transform-origin: top center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  border: 1px solid #c8d0db;
}
.mc-border {
  position: absolute; inset: 16px; border: 2px solid var(--navy-700);
  outline: 6px solid var(--orange-500); outline-offset: 6px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.mc-corner { position: absolute; width: 58px; height: 58px; border: 0 solid var(--orange-500); }
.mc-corner.tl { top: 14px; left: 14px; border-top-width: 4px; border-left-width: 4px; }
.mc-corner.tr { top: 14px; right: 14px; border-top-width: 4px; border-right-width: 4px; }
.mc-corner.bl { bottom: 14px; left: 14px; border-bottom-width: 4px; border-left-width: 4px; }
.mc-corner.br { bottom: 14px; right: 14px; border-bottom-width: 4px; border-right-width: 4px; }
.mc-watermark {
  position: absolute; width: 460px; height: 460px; top: 50%; left: 50%;
  transform: translate(-50%, -48%); color: var(--navy-700); opacity: 0.045;
}
.mc-inner {
  position: relative; z-index: 1; width: 100%; height: 100%;
  padding: 44px 78px 34px; display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.mc-logo { height: 62px; width: auto; margin-bottom: 20px; }
.mc-kicker {
  font-size: 1.55rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--navy-700); margin: 0;
}
.mc-rule { display: flex; align-items: center; gap: 10px; margin: 12px 0 26px; }
.mc-rule span { display: block; width: 90px; height: 2px; background: var(--orange-500); }
.mc-rule i { width: 9px; height: 9px; background: var(--orange-500); transform: rotate(45deg); }
.mc-presented { font-size: 0.98rem; color: #64748B; margin: 0 0 10px; }
/* `.mc-name` is an <h3>, so it must outrank `.report h3` above (which sets
   left alignment and a 13.5pt body size) — hence the longer selector. */
.report .mini-cert .mc-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 56px; font-weight: 700; line-height: 1.12;
  color: var(--navy-700); margin: 0 0 6px; width: 100%; box-sizing: border-box;
  border-bottom: 2px solid var(--border); padding: 0 40px 14px;
  overflow-wrap: break-word; text-align: center;
}
.mc-body {
  font-size: 16.3px; line-height: 1.85; color: #334155; max-width: 810px;
  margin: 22px 0 0; text-align: center;
}
.mc-body strong { color: var(--navy-700); font-weight: 700; }
.mc-foot {
  margin-top: auto; width: 100%;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 24px;
}
.mc-sign { text-align: center; }
.mc-sign-img { height: 62px; display: flex; align-items: flex-end; justify-content: center; }
.mc-sign-img img { max-height: 62px; width: auto; display: none; }
.mc-sign-img img.is-loaded { display: block; }
.mc-sign-line { width: 230px; height: 2px; background: var(--navy-700); margin: 6px auto 8px; }
.mc-sign-name { font-size: 0.98rem; font-weight: 800; color: var(--navy-700); margin: 0; }
.mc-sign-title { font-size: 0.82rem; color: #64748B; margin: 2px 0 0; }
.mc-seal {
  width: 118px; height: 118px; border-radius: 50%;
  border: 2px dashed var(--orange-500); color: var(--orange-500);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; margin-bottom: 6px;
}
.mc-seal svg { width: 42px; height: 42px; }
.mc-seal span {
  font-size: 0.56rem; font-weight: 800; letter-spacing: 0.14em;
  text-align: center; line-height: 1.4; color: var(--navy-700);
}
.mc-meta { text-align: right; }
.mc-meta-label {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: #94A3B8; margin: 0;
}
.mc-meta-id {
  font-family: 'SFMono-Regular', Consolas, Menlo, monospace; font-size: 1rem; font-weight: 700;
  color: var(--navy-700); margin: 2px 0 10px; letter-spacing: 0.04em;
}
.mc-meta-value { font-size: 0.9rem; font-weight: 700; color: var(--navy-700); margin: 2px 0 10px; }
.mc-verify { font-size: 0.7rem; color: #94A3B8; margin: 0; }

/* Form field feedback for the certificate number */
.rp-field-msg { font-size: 0.8rem; margin-top: 6px; min-height: 1.1em; font-weight: 600; }
.rp-field-msg.is-ok { color: #15803D; }
.rp-field-msg.is-error { color: #B91C1C; }
.reserved-note {
  border: 2px dashed var(--border); border-radius: 16px;
  padding: 44px 40px; max-width: 460px; text-align: center;
  background: repeating-linear-gradient(45deg, rgba(245,137,59,0.04) 0 12px, transparent 12px 24px);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.reserved-note svg { width: 40px; height: 40px; color: var(--orange-500); margin: 0 auto 14px; }
.reserved-note .rn-title {
  font-size: 13pt; font-weight: 800; color: var(--navy-700); margin: 0 0 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.reserved-note .rn-body {
  font-size: 10.5pt; color: var(--ink-muted); margin: 0 0 10px; line-height: 1.6;
  text-align: center; font-family: 'Plus Jakarta Sans', sans-serif;
}

.cc-college {
  font-size: 15pt; font-weight: 700; text-transform: uppercase;
  color: var(--navy-700); margin: 0 0 3px;
}
.cc-place { font-size: 11.5pt; margin: 0 0 3px; }
.cc-dept { font-size: 12pt; font-weight: 700; margin: 0 0 6px; }

.cp-sign {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-top: 54px; text-align: left;
}
.cp-sign-img { height: 56px; display: flex; align-items: flex-end; }
.cp-sign-img img { max-height: 56px; width: auto; display: none; }
.cp-sign-img img.is-loaded { display: block; }
.cp-sign-line { width: 210px; height: 1.5px; background: #111; margin: 4px 0 6px; }
.cp-sign-name { font-size: 12pt; font-weight: 700; margin: 0; }
.cp-sign-title { font-size: 10.5pt; margin: 1px 0 0; color: #333; }
.cp-seal { text-align: right; font-size: 11.5pt; }
.cp-seal p { margin: 0 0 6px; }

.cc-signs { display: flex; justify-content: space-between; margin-top: 70px; gap: 20px; }
.cc-signs > div { flex: 1; text-align: center; }
.cc-sline { height: 1.5px; background: #111; margin-bottom: 6px; }
.cc-signs p { margin: 0; font-size: 11.5pt; font-weight: 700; }
.cc-role { font-weight: 400 !important; font-size: 10.5pt !important; color: #333; }

/* ---------- Declaration / acknowledgement ---------- */
.decl-sign { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 70px; }
.decl-sign p { margin: 0 0 6px; font-size: 11.5pt; }
.decl-right { text-align: right; min-width: 230px; }
.decl-name { font-weight: 700; font-size: 12pt; }
.ack-sign { margin-top: 60px; text-align: right; }
.ack-sign p { margin: 0; font-size: 11.5pt; }

/* ---------- Bibliography ---------- */
.biblio { padding-left: 24px; font-size: 11.5pt; }
.biblio li { margin-bottom: 9px; }
.biblio .url { color: var(--navy-600); word-break: break-all; }
.report-end { margin-top: 50px; text-align: center; font-size: 12pt; font-style: italic; color: #555; }

/* ============================================================
   Print — A4 portrait, one report section per page break
   ============================================================ */
/* Guideline margins: left 1.5 cm, top 1 cm, bottom 1 cm, right 1 cm */
@page { size: A4 portrait; margin: 1cm 1cm 1cm 1.5cm; }

@media print {
  .no-print, .cert-header, .rp-form-wrap, .rp-actions { display: none !important; }

  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  .report { padding: 0 !important; display: block !important; }

  .report .page {
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    page-break-after: always;
    break-after: page;
  }
  .report .page:last-child { page-break-after: auto; break-after: auto; }

  /* The reserved certificate page may have no printable content, so give it
     real height — otherwise it collapses and no blank sheet comes out. */
  .report .cert-reserved { min-height: 240mm !important; display: block !important; }

  /* Scale the landscape certificate to the portrait page's printable width
     (A4 210mm less 2x16mm margins = 178mm of 297mm → 0.599). */
  .report .mini-cert {
    transform: scale(0.599) !important;
    margin-bottom: -318px !important;   /* reclaim the space the scale leaves */
  }

  .report h3, .report h4 { page-break-after: avoid; break-after: avoid; }
  .report .cp-body, .report .cp-list li { orphans: 3; widows: 3; }
  .report .data-table, .report .toc { page-break-inside: avoid; break-inside: avoid; }
  .title-page, .cert-page { page-break-inside: avoid; break-inside: avoid; }

  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}

/* ---------- Responsive (screen) ---------- */
@media (max-width: 900px) {
  .rp-grid { grid-template-columns: 1fr; }
  .report { padding: 20px 10px 50px; }
  .report .page { padding: 40px 30px; }
}

@media (max-width: 840px) {
  .report { overflow-x: auto; }
}