/* Benha University - Document Verification
   One stylesheet, no framework. Every colour and the typeface below were
   sampled from the live university site (bu.edu.eg) so this portal reads as
   part of the university estate rather than as a separate product. */

@import url("/assets/fonts/tajawal.css");

:root {
  /* Sampled from bu.edu.eg: the navy of the masthead and footer bands, the
     lighter blue used for headings and links, and the gold accent that rules
     under every section title. */
  --navy:        #11294C;
  --navy-soft:   #0C3F77;
  --gold:        #E2A750;
  --paper:       #F5F5F5;
  --card:        #ffffff;
  --ink:         #212529;
  --ink-muted:   #5a6675;
  --line:        #dde3ea;
  --ok:          #12734a;
  --ok-bg:       #e8f5ee;
  --warn:        #8a5a00;
  --warn-bg:     #fdf3e0;
  --bad:         #9b1c1c;
  --bad-bg:      #fdeaea;
  --radius:      10px;
  --shadow:      0 1px 2px rgba(18,38,63,.06), 0 8px 24px rgba(18,38,63,.06);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  /* Tajawal is the university's typeface and carries both scripts, so Arabic
     and English render in the same voice instead of switching families. */
  font-family: "Tajawal", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
}

a { color: var(--navy-soft); }

/* ---------- shell ---------- */

.masthead {
  background: var(--navy);
  color: #fff;
  border-bottom: 3px solid var(--gold);
}
.masthead .inner {
  max-width: 860px; margin: 0 auto; padding: 18px 20px;
  display: flex; align-items: center; gap: 14px;
}
.masthead .crest { color: var(--gold); flex: 0 0 auto; display: flex; }
.masthead .crest svg { display: block; }
.masthead .titles { border-inline-start: 1px solid rgba(255,255,255,.28); padding-inline-start: 14px; }
.masthead h1 { font-size: 16px; margin: 0; font-weight: 700; letter-spacing: .1px; }
.masthead p  { font-size: 13px; margin: 1px 0 0; color: #b9c6d6; font-weight: 400; }
.masthead .spacer { flex: 1; }
.lang-toggle {
  color: #fff; text-decoration: none; font-size: 13px;
  border: 1px solid rgba(255,255,255,.35); border-radius: 6px; padding: 5px 12px;
}
.lang-toggle:hover { background: rgba(255,255,255,.12); }

main { max-width: 860px; margin: 0 auto; padding: 28px 20px 60px; }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 26px; margin-bottom: 20px;
}

/* ---------- verification form ---------- */

.hint { color: var(--ink-muted); font-size: 14px; margin: 0 0 18px; }

label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 7px; }

input[type=text], input[type=password], input[type=date], input[type=search], select, textarea {
  width: 100%; padding: 11px 13px; font-size: 16px;
  border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--ink); font-family: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--navy-soft); outline-offset: 1px; border-color: var(--navy-soft);
}

.code-input {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 20px; letter-spacing: 2px; text-align: center; text-transform: uppercase;
  direction: ltr;
}
/* The uppercase transform is for what the user types, not for the hint. */
.code-input::placeholder { text-transform: none; letter-spacing: 1px; opacity: .55; }

.btn {
  display: inline-block; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--navy); color: #fff; font: inherit; font-weight: 600;
  padding: 12px 22px; text-decoration: none;
}
.btn:hover { background: var(--navy-soft); }
.btn.full  { width: 100%; margin-top: 16px; }
.btn.ghost { background: transparent; color: var(--navy); border: 1px solid var(--line); }
.btn.ghost:hover { background: var(--paper); }
.btn.danger { background: var(--bad); }
.btn.small  { padding: 7px 14px; font-size: 14px; }

/* ---------- verification result ---------- */

.verdict { display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; border-radius: var(--radius); margin-bottom: 22px; }
.verdict .mark { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; display: grid; place-items: center; font-size: 25px; font-weight: 700; color: #fff; }
.verdict h2 { margin: 0 0 4px; font-size: 21px; }
.verdict p  { margin: 0; font-size: 15px; }

.verdict.valid   { background: var(--ok-bg);   border: 1px solid #b7ddc8; color: #0d4c33; }
.verdict.valid   .mark { background: var(--ok); }
.verdict.revoked, .verdict.not_found, .verdict.tampered { background: var(--bad-bg); border: 1px solid #f0c2c2; color: #7a1616; }
.verdict.revoked .mark, .verdict.not_found .mark, .verdict.tampered .mark { background: var(--bad); }
.verdict.expired, .verdict.rate_limited { background: var(--warn-bg); border: 1px solid #ecd9ae; color: #6d4700; }
.verdict.expired .mark, .verdict.rate_limited .mark { background: var(--warn); }

.detail { width: 100%; border-collapse: collapse; }
.detail th, .detail td { text-align: start; padding: 11px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.detail th { width: 38%; color: var(--ink-muted); font-weight: 600; font-size: 14px; }
.detail td { font-size: 15px; }
.detail tr:last-child th, .detail tr:last-child td { border-bottom: 0; }
.mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; direction: ltr; display: inline-block; }

.notice { background: var(--warn-bg); border: 1px solid #ecd9ae; color: #6d4700; border-radius: 8px; padding: 13px 16px; font-size: 14px; margin: 18px 0 0; }
.errorbox { background: var(--bad-bg); border: 1px solid #f0c2c2; color: #7a1616; border-radius: 8px; padding: 12px 15px; font-size: 14px; margin-bottom: 16px; }

footer { text-align: center; color: var(--ink-muted); font-size: 13px; padding: 0 20px 40px; }

/* ---------- staff area ---------- */

.adminbar { background: var(--navy); color: #fff; }
.adminbar .inner { max-width: 1080px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 20px; }
.adminbar a { color: #cfd9e5; text-decoration: none; font-size: 14px; }
.adminbar a:hover, .adminbar a.on { color: #fff; }
.adminbar .brand { font-weight: 700; color: #fff; }
.adminbar .spacer { flex: 1; }
.adminbar form { margin: 0; }
.adminbar button { background: none; border: 1px solid rgba(255,255,255,.3); color: #cfd9e5; border-radius: 6px; padding: 5px 11px; font: inherit; font-size: 13px; cursor: pointer; }

.admin-main { max-width: 1080px; margin: 0 auto; padding: 26px 20px 60px; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.stat .n { font-size: 27px; font-weight: 700; color: var(--navy); line-height: 1.2; }
.stat .k { font-size: 13px; color: var(--ink-muted); }

table.grid { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
table.grid th { background: #eef2f6; text-align: start; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-muted); padding: 10px 13px; }
table.grid td { padding: 11px 13px; border-top: 1px solid var(--line); font-size: 14px; }
table.grid tr:hover td { background: #fafbfc; }

.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pill.active { background: var(--ok-bg); color: var(--ok); }
.pill.revoked { background: var(--bad-bg); color: var(--bad); }
.pill.expired { background: var(--warn-bg); color: var(--warn); }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 16px; }
h2.section { font-size: 16px; margin: 28px 0 12px; color: var(--navy); font-weight: 700; }

/* bu.edu.eg rules every section title with a 120x2px gold bar. Reproducing it
   is the single cheapest thing that makes a page read as "theirs". */
.ruled { position: relative; padding-bottom: 12px; color: var(--navy); font-weight: 700; }
.ruled::after {
  content: ""; position: absolute; inset-inline-start: 0; bottom: 0;
  width: 120px; height: 2px; background: var(--gold);
}

@media (max-width: 620px) {
  .row2 { grid-template-columns: 1fr; }
  .verdict { flex-direction: column; }
}

/* On a phone a two-column detail table leaves each value about 150px, which
   wraps the verification code mid-string. That code is the one thing a
   verifier reads aloud or types back, so below 520px the rows stack and every
   value gets the full width. */
@media (max-width: 520px) {
  .result-foot { flex-direction: column; align-items: flex-start; }
  .result-qr { align-self: center; }
  .detail th, .detail td { display: block; width: auto; }
  .detail th {
    border-bottom: 0; padding: 12px 4px 0;
    font-size: 12px; text-transform: uppercase; letter-spacing: .4px;
  }
  .detail td { padding: 2px 4px 12px; font-size: 16px; }
  .detail .mono { white-space: nowrap; font-size: 15px; }
}

/* ---------- verification result: actions and print receipt ---------- */

.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.checked-stamp { font-size: 13px; color: var(--ink-muted); margin: 0; }
.print-footer { display: none; }

/* Timestamp on one side, re-check QR on the other. */
.result-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line);
}
.result-foot-text { flex: 1; min-width: 0; }
.qr-hint { margin: 6px 0 0; font-size: 13px; }

/* Width is driven by the verification code underneath, not by the QR: the code
   is the widest element in the box, and letting it overflow a narrower figure
   is what made the caption sit off to one side. */
.result-qr { margin: 0; flex: 0 0 auto; width: 148px; text-align: center; }
.result-qr svg { width: 104px; height: 104px; display: block; margin: 0 auto; }
.result-qr a { display: inline-block; border-radius: 4px; }
.result-qr a:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.result-qr figcaption { margin-top: 7px; }
.result-qr .mono { font-size: 11px; letter-spacing: .2px; white-space: nowrap; }
.result-qr .qr-cap {
  display: block; font-size: 10px; color: var(--ink-muted);
  margin: 4px 0 0; line-height: 1.4;
}

/* A verifier who prints this page - or saves it as PDF - wants a clean record
   for their file, not a screenshot of a website. Strip the chrome, keep the
   verdict, the details and the date. */
@media print {
  body { background: #fff; }
  .masthead .spacer, .lang-toggle, .actions, .no-print, .notice { display: none !important; }
  .masthead { background: #fff; color: var(--ink); border-bottom: 2px solid var(--navy); }
  .masthead .crest { border-color: var(--navy); color: var(--navy); }
  .masthead p { color: var(--ink-muted); }
  main { max-width: none; padding: 0; }
  .card { box-shadow: none; border: 0; padding: 0; }
  .verdict { border-width: 2px; page-break-inside: avoid; }
  .checked-stamp { font-size: 12px; }
  /* The QR is the reason a printed receipt stays useful, so it survives the
     print stylesheet and gets a little larger rather than being stripped. */
  .result-foot { page-break-inside: avoid; }
  .result-qr svg { width: 116px; height: 116px; }
  .qr-hint { display: none; }
  .print-footer {
    display: block; text-align: center; font-size: 11px;
    color: var(--ink-muted); margin-top: 24px;
    border-top: 1px solid var(--line); padding-top: 10px;
  }
  footer { display: none; }
  @page { margin: 14mm; }
}

/* ---------- issuing authority ---------- */

/* The authority sits above the document detail, because "who issued this"
   is the first question a foreign registrar has. */
.issuer-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--card); border: 1px solid var(--line);
  border-inline-start: 4px solid var(--gold);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px 20px; margin-bottom: 18px;
}
.issuer-logo { height: 44px; width: auto; flex: 0 0 auto; }
.issuer-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--ink-muted); font-weight: 700;
}
.issuer-name { font-size: 17px; font-weight: 700; color: var(--navy); line-height: 1.35; }
.issuer-auth { font-size: 13px; color: var(--ink-muted); margin-top: 1px; }

/* ---------- marks grid ---------- */

/* A Thanaweya Amma result is a grid on paper, so it is a grid here. Wrapped so
   a narrow phone scrolls the table rather than the whole page. */
.marks-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 4px; }
.marks { width: 100%; border-collapse: collapse; min-width: 380px; }
.marks th {
  background: #eef2f6; text-align: start; padding: 9px 12px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--ink-muted); white-space: nowrap;
}
.marks td { padding: 10px 12px; border-top: 1px solid var(--line); font-size: 14px; }
.marks td.num { text-align: center; font-family: ui-monospace, Menlo, monospace; width: 80px; }
.marks td.strong { font-weight: 700; color: var(--navy); }
.marks .muted { color: var(--ink-muted); font-weight: 400; font-size: 12px; font-family: inherit; }
.marks tbody tr:nth-child(even) td { background: #fafbfc; }

@media print {
  .marks-wrap { overflow: visible; }
  .issuer-card { break-inside: avoid; box-shadow: none; }
  .marks { break-inside: auto; }
  .marks tr { break-inside: avoid; }
}

@media (max-width: 520px) {
  .issuer-card { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ---------- shared inline elements ---------- */

.fingerprint {
  font-size: 13px; line-height: 2; word-spacing: 2px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px;
  padding: 12px 14px; margin: 0 0 10px; user-select: all;
}
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em; background: var(--paper); padding: 1px 5px; border-radius: 4px;
  direction: ltr; display: inline-block;
}
footer a { color: var(--navy-soft); }

/* A route back to the university's own site, for a verifier who wants to reach
   the institution through a channel that did not arrive with the document. */
.footer-portal { margin: 10px 0 0; font-size: 13px; }
.footer-portal a { color: var(--navy-soft); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 1px; }
.footer-portal a:hover { color: var(--navy); border-bottom-color: var(--gold); }

/* ---------- two-factor enrolment ---------- */

.enrol { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.enrol-qr { flex: 0 0 auto; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.enrol-qr svg { display: block; width: 168px; height: 168px; }
.enrol-steps { flex: 1; min-width: 240px; }
.enrol-steps ol { margin: 0 0 16px; padding-inline-start: 20px; font-size: 14px; }
.enrol-steps li { margin-bottom: 6px; }
.setup-key {
  font-size: 15px; letter-spacing: 1px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 6px; padding: 9px 12px; margin: 0;
  user-select: all;
}

.recovery-codes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px; margin: 14px 0 18px;
}
.recovery-codes .mono {
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 10px; text-align: center; font-size: 15px; letter-spacing: .5px;
}

/* ---------- printable certificate ---------- */

.sheet {
  width: 210mm; min-height: 297mm; margin: 20px auto; background: #fff;
  padding: 22mm 20mm; box-shadow: var(--shadow); position: relative;
}
.sheet .head { text-align: center; border-bottom: 2.5px solid var(--navy); padding-bottom: 16px; }
.sheet .head .sheet-logo { height: 24mm; width: auto; }
/* Authorities with no logo on file fall back to their name, set in the same
   place the logo would have been. */
.sheet .sheet-issuer-ar { font-size: 20px; font-weight: 700; color: var(--navy); }
.sheet .sheet-issuer-en { font-size: 13px; letter-spacing: 1.5px; color: var(--gold);
                          text-transform: uppercase; margin-top: 2px; }
.sheet .sheet-authority { font-size: 11px; color: var(--ink-muted); margin-top: 6px; }

/* Marks grid on the printed sheet. */
.sheet-marks { width: 100%; border-collapse: collapse; margin: 6mm 0 0; font-size: 10px; }
.sheet-marks th { background: #eef2f6; text-align: start; padding: 4px 6px;
                  font-size: 9px; text-transform: uppercase; letter-spacing: .3px; color: var(--ink-muted); }
.sheet-marks td { padding: 4px 6px; border-top: .5px solid var(--line); }
.sheet-marks td.num { text-align: center; width: 14mm; font-family: ui-monospace, Menlo, monospace; }
.sheet-marks td.strong { font-weight: 700; }
.sheet-marks .ar { color: var(--ink-muted); }
@media print { .sheet-marks tr { break-inside: avoid; } }
.sheet h1 { text-align: center; font-size: 19px; margin: 26px 0 6px; }
.sheet .serial { text-align: center; color: var(--ink-muted); font-size: 13px; margin-bottom: 26px; }
.sheet .qrbox { position: absolute; inset-inline-end: 20mm; bottom: 22mm; text-align: center; width: 46mm; }
.sheet .qrbox svg { width: 40mm; height: 40mm; }
.sheet .qrbox .cap { font-size: 10px; color: var(--ink-muted); margin-top: 5px; line-height: 1.35; }
.sheet .qrbox .code { font-family: ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: .5px; direction: ltr; margin-top: 3px; }
/* The QR and code are links on screen, but must print as plain document ink. */
.sheet .qrbox a { text-decoration: none; color: inherit; display: inline-block; }
.sheet .qrbox a:hover { outline: 2px solid var(--navy); outline-offset: 3px; }
@media print { .sheet .qrbox a:hover { outline: 0; } }
/* Bilingual field labels stack instead of running together with a slash. */
.sheet .detail th { width: 34%; }
.sheet .lbl-en { display: block; }
.sheet .lbl-ar { display: block; font-size: .86em; font-weight: 400; opacity: .8; margin-top: 1px; }

.sheet-fingerprint {
  position: absolute; inset-inline-start: 20mm; inset-inline-end: 20mm; bottom: 8mm;
  border-top: 1px solid var(--line); padding-top: 4mm; text-align: center;
}
.sheet-fingerprint .fp-label { font-size: 8px; color: var(--ink-muted); letter-spacing: .3px; }
.sheet-fingerprint .fp-value {
  font-family: ui-monospace, Menlo, monospace; font-size: 8.5px;
  letter-spacing: .2px; word-spacing: 1px; direction: ltr; margin: 2px 0 1px;
  color: var(--ink);
}
.sheet-fingerprint .fp-note { font-size: 7.5px; color: var(--ink-muted); }

.sheet .signature { position: absolute; inset-inline-start: 20mm; bottom: 26mm; width: 60mm; text-align: center; }
.sheet .signature .line { border-top: 1px solid var(--ink); margin-bottom: 5px; }
.sheet .signature .role { font-size: 12px; color: var(--ink-muted); }
.printbar { max-width: 210mm; margin: 16px auto 0; display: flex; gap: 10px; justify-content: flex-end; }

@media print {
  body { background: #fff; }
  .printbar, .masthead, .adminbar { display: none !important; }
  .sheet { box-shadow: none; margin: 0; width: auto; padding: 18mm; }
  @page { size: A4; margin: 0; }
}