/* ==========================================================================
   registrations.css
   --------------------------------------------------------------------------
   Hand-written styles for the Student Registration view
   (templates/student/get_student_registrations.html).

   Extracted out of the generated TailAdmin bundle (style.css) so it can be
   maintained by hand without being buried in / overwritten by Tailwind build
   output. Loads AFTER epnu-brand.css, so the --epnu-* design tokens it
   consumes are already defined.
   ========================================================================== */

/* ==========================================================================
   Student Registration View  (student/get_student_registrations.html)
   ========================================================================== */

/* These aliases map the view's color slots onto the theme-aware brand tokens
   so cards/surfaces follow light & dark mode. Without them the var() fallbacks
   (#fff / #f8fafc) stayed light in dark mode → white-on-white cards. */
:root {
  --epnu-elevated: var(--epnu-bg-elevated);
  --epnu-surface: var(--epnu-bg-muted);
  --epnu-brand: var(--epnu-blue-500);
}

/* ── Status badge palette ─────────────────────────────────────────────── */
.reg-status-0 { background: #fef9c3; color: #854d0e; border: 1px solid #fde68a; }
.reg-status-1 { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }
.reg-status-2 { background: #e0e7ff; color: #3730a3; border: 1px solid #c7d2fe; }
.reg-status-3 { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }
.reg-status-4 { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.reg-status-5 { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

.dark .reg-status-0 { background: #422006; color: #fde68a; border-color: #854d0e; }
.dark .reg-status-1 { background: #1e3a5f; color: #93c5fd; border-color: #1e40af; }
.dark .reg-status-2 { background: #312e81; color: #c7d2fe; border-color: #3730a3; }
.dark .reg-status-3 { background: #431407; color: #fdba74; border-color: #9a3412; }
.dark .reg-status-4 { background: #14532d; color: #86efac; border-color: #166534; }
.dark .reg-status-5 { background: #450a0a; color: #fca5a5; border-color: #991b1b; }

/* ── Document status ──────────────────────────────────────────────────── */
.doc-pending  { background: #fef9c3; color: #854d0e; border: 1px solid #fde68a; }
.doc-approved { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.doc-rejected { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

.dark .doc-pending  { background: #422006; color: #fde68a; border-color: #854d0e; }
.dark .doc-approved { background: #14532d; color: #86efac; border-color: #166534; }
.dark .doc-rejected { background: #450a0a; color: #fca5a5; border-color: #991b1b; }

/* ── Registration card ────────────────────────────────────────────────── */
.reg-card {
  background: var(--epnu-elevated, #fff);
  border: 1px solid var(--epnu-border, #e2e8f0);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(13,27,42,.06);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.reg-card:hover { box-shadow: 0 6px 24px rgba(13,27,42,.11); transform: translateY(-1px); }

.reg-card__header {
  padding: 1.125rem 1.25rem;
  border-bottom: 1px solid var(--epnu-border, #e2e8f0);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  background: linear-gradient(135deg,rgba(0,119,255,.04) 0%,transparent 60%);
}

.reg-card__body { padding: 1.25rem; }

/* ── Section inside card ──────────────────────────────────────────────── */
.reg-section {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--epnu-border, #e2e8f0);
}
.reg-section-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--epnu-text-primary, #0d1b2a);
  margin-bottom: .875rem;
}
.reg-section-title svg { width: 1rem; height: 1rem; color: var(--epnu-brand, #0077ff); }

/* ── Contact row ──────────────────────────────────────────────────────────
   Email + phone on a row of their own above the academic details: they're the
   first thing a reviewer reaches for, and giving them a dedicated row means a
   long email can never end up sharing a track with the phone number.
   Same anatomy as the info grid (reg-info-item / -label / -value), only the
   track sizing and the closing divider differ.
   ─────────────────────────────────────────────────────────────────────────── */
.reg-contact-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: .75rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px dashed var(--epnu-border, #e2e8f0);
}

/* ── Info grid ────────────────────────────────────────────────────────── */
.reg-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: .75rem;
}
/* Grid items are min-width:auto by default, so a value with no break
   opportunity (a long email) would size its track past its 1fr share and spill
   into the neighbouring cell. min-width:0 caps the track, overflow-wrap breaks
   the value instead of letting it overflow. */
.reg-info-item { min-width: 0; }
.reg-info-label {
  display: block;
  font-size: .6875rem;
  font-weight: 600;
  color: var(--epnu-text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .2rem;
}
.reg-info-value {
  display: block;
  min-width: 0;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--epnu-text-primary, #0d1b2a);
  overflow-wrap: anywhere;
}
/* Latin values (email, phone) inside the RTL page: keep them laid out LTR so a
   wrapped address doesn't get bidi-reordered, while staying flush with the
   RTL start edge. */
.reg-info-value--ltr { direction: ltr; text-align: right; }

/* ── Desire list ──────────────────────────────────────────────────────── */
.desire-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.desire-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem .875rem;
  background: var(--epnu-surface, #f8fafc);
  border: 1px solid var(--epnu-border, #e2e8f0);
  border-radius: 10px;
}
.desire-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background: rgba(0,119,255,.12);
  color: var(--epnu-brand, #0077ff);
  font-size: .75rem;
  font-weight: 800;
  flex-shrink: 0;
}
.desire-name { font-size: .8125rem; font-weight: 600; color: var(--epnu-text-primary, #0d1b2a); }

/* ── Document rows ────────────────────────────────────────────────────── */
.doc-list { display: flex; flex-direction: column; gap: .5rem; }
.doc-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .625rem .875rem;
  background: var(--epnu-surface, #f8fafc);
  border: 1px solid var(--epnu-border, #e2e8f0);
  border-radius: 10px;
  flex-wrap: wrap;
}
.doc-name { font-size: .8125rem; font-weight: 600; color: var(--epnu-text-primary, #0d1b2a); flex: 1; min-width: 8rem; }
.doc-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* ── Score rows ───────────────────────────────────────────────────────── */
.score-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .5rem; }
.score-item {
  padding: .625rem .875rem;
  background: var(--epnu-surface, #f8fafc);
  border: 1px solid var(--epnu-border, #e2e8f0);
  border-radius: 10px;
}
.score-field { font-size: .6875rem; font-weight: 600; color: var(--epnu-text-muted, #64748b); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .2rem; }
.score-value { font-size: 1rem; font-weight: 800; color: var(--epnu-brand, #0077ff); }

/* ── Timeline ─────────────────────────────────────────────────────────── */
.timeline { position: relative; padding-right: 1.25rem; }
.timeline::before {
  content: '';
  position: absolute;
  right: .4375rem;
  top: .375rem;
  bottom: .375rem;
  width: 2px;
  background: var(--epnu-border, #e2e8f0);
  border-radius: 9999px;
}
.timeline-item { position: relative; padding-bottom: .875rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute;
  right: -.8rem;
  top: .25rem;
  width: .75rem;
  height: .75rem;
  border-radius: 9999px;
  background: var(--epnu-brand, #0077ff);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(0,119,255,.25);
}
.timeline-content { font-size: .8125rem; color: var(--epnu-text-primary, #0d1b2a); }
.timeline-meta { font-size: .6875rem; color: var(--epnu-text-muted, #64748b); margin-top: .125rem; }

/* ── Badge ────────────────────────────────────────────────────────────── */
.reg-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .625rem;
  border-radius: 9999px;
  font-size: .6875rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ── Empty state ─────────────────────────────────────────────────────── */
.reg-empty {
  padding: 4rem 1.5rem;
  border: 1px dashed var(--epnu-border, #e2e8f0);
  border-radius: 16px;
  background: var(--epnu-elevated, #fff);
  text-align: center;
}

/* ── Collapse toggle icon ─────────────────────────────────────────────── */
[data-expanded="true"] .collapse-icon { transform: rotate(180deg); }
.collapse-icon { transition: transform .25s ease; }

/* ── View-document link ───────────────────────────────────────────────── */
.doc-view-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .6875rem;
  font-weight: 600;
  color: var(--epnu-brand, #0077ff);
  text-decoration: none;
  padding: .2rem .5rem;
  border-radius: 6px;
  background: rgba(0,119,255,.08);
  transition: background .15s ease;
}
.doc-view-link:hover { background: rgba(0,119,255,.16); }
.doc-view-link svg { width: .875rem; height: .875rem; }


/* ==========================================================================
   Document Image Thumbnail + Lightbox
   (student/get_student_registrations.html)
   ========================================================================== */

/* ── doc-item with image layout ─────────────────────────────────────────── */
.doc-item--image {
  align-items: flex-start;
  gap: 1rem;
}

/* ── Per-document rejection reason — nested inside the doc-item card itself,
     wraps onto its own full-width row within the same bordered box. Deliberately
     lighter than .reg-rejection (no gradient/watermark/blink): visible via a
     solid accent border + tinted background, simple otherwise. ── */
.doc-rejection-wrap {
  flex: 1 1 100%;
  width: 100%;
}
.doc-rejection {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-top: .625rem;
  padding: .625rem .75rem;
  border-radius: 8px;
  border: 1px solid rgba(244, 63, 94, .25);
  border-inline-start: 3px solid #e11d48;
  background: rgba(244, 63, 94, .07);
}
.doc-rejection__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: .05rem;
  color: #e11d48;
}
.doc-rejection__body { min-width: 0; }
.doc-rejection__label {
  font-size: .75rem;
  font-weight: 700;
  color: #e11d48;
  margin-bottom: .25rem;
}
.doc-rejection__text {
  font-size: .9375rem;
  line-height: 1.6;
  font-weight: 500;
  color: #881337;
  word-break: break-word;
}
.dark .doc-rejection {
  background: rgba(244, 63, 94, .12);
  border-color: rgba(244, 63, 94, .3);
}
.dark .doc-rejection__icon { color: #fb7185; }
.dark .doc-rejection__label { color: #fb7185; }
.dark .doc-rejection__text { color: #fecdd3; }

/* ── Thumbnail wrapper ───────────────────────────────────────────────────── */
.doc-thumb-wrap {
  flex-shrink: 0;
  position: relative;
  width: 5rem;
  height: 5rem;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--epnu-border, #e2e8f0);
  background: var(--epnu-surface, #f8fafc);
}

.doc-thumb-wrap--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--epnu-surface, #f8fafc);
}

/* ── Thumbnail button ─────────────────────────────────────────────────────── */
.doc-thumb-btn {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  position: relative;
}

/* ── Hover zoom overlay ──────────────────────────────────────────────────── */
.doc-thumb-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.42);
  color: #fff;
  opacity: 0;
  transition: opacity .2s ease;
}
.doc-thumb-overlay svg { width: 1.375rem; height: 1.375rem; }
.doc-thumb-btn:hover .doc-thumb-overlay { opacity: 1; }

/* ── Dark mode overrides for student registrations (/student/) ─────────── */
.dark .reg-card {
  background: var(--epnu-bg-elevated);
  border-color: var(--epnu-border);
}
.dark .reg-card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
}
.dark .reg-card__header {
  border-bottom-color: var(--epnu-border);
}
.dark .reg-section {
  border-top-color: var(--epnu-border);
}
.dark .reg-contact-row {
  border-bottom-color: var(--epnu-border);
}
.dark .reg-empty {
  background: var(--epnu-bg-elevated);
  border-color: var(--epnu-border);
}
.dark .desire-item,
.dark .doc-item,
.dark .score-item {
  background: var(--epnu-bg-muted);
  border-color: var(--epnu-border);
}
.dark .doc-thumb-wrap,
.dark .doc-thumb-wrap--empty {
  background: var(--epnu-bg-muted);
  border-color: var(--epnu-border);
}
.dark .timeline::before {
  background: var(--epnu-border);
}
.dark .timeline-dot {
  border-color: var(--epnu-bg-elevated);
}
/* ═══════════════════════════════════════════════════════════════════════════
   Rejection banner — standalone, eye-catching section shown to the student
   when a registration is rejected (status 5). Built as a dedicated component
   class (not Tailwind utilities) so it renders regardless of the purged build.
   ═══════════════════════════════════════════════════════════════════════════ */
.reg-rejection {
  position: relative;
  margin-bottom: 1.375rem;
  padding: 1.125rem 1.25rem;
  border-radius: 1.125rem;
  isolation: isolate;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(244, 63, 94, .14) 0%, transparent 45%),
    linear-gradient(180deg, rgba(255, 255, 255, .72) 0%, rgba(255, 245, 246, .72) 100%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow:
    0 1px 1px rgba(190, 18, 60, .04),
    0 12px 32px -12px rgba(225, 29, 72, .35);
}
/* Gradient hairline border via mask (crisp on any background) */
.reg-rejection::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(244, 63, 94, .55), rgba(244, 63, 94, .1) 45%, rgba(244, 63, 94, .35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
/* Oversized decorative watermark glyph in the start corner */
.reg-rejection::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-start: -1.75rem;
  inset-inline-start: -1.25rem;
  width: 9rem;
  height: 9rem;
  background: radial-gradient(circle at 50% 50%, rgba(244, 63, 94, .16), transparent 68%);
  pointer-events: none;
}
.reg-rejection__head {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .875rem;
}
.reg-rejection__icon {
  flex-shrink: 0;
  width: 2.625rem;
  height: 2.625rem;
  border-radius: .875rem;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #fb7185 0%, #e11d48 55%, #be123c 100%);
  box-shadow:
    0 4px 12px -2px rgba(225, 29, 72, .55),
    inset 0 1px 0 rgba(255, 255, 255, .35);
}
.reg-rejection__icon svg { width: 1.5rem; height: 1.5rem; }
.reg-rejection__heading { min-width: 0; }
.reg-rejection__eyebrow {
  display: block;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #e11d48;
  opacity: .8;
  margin-bottom: .1rem;
}
.reg-rejection__title {
  font-size: .9375rem;
  font-weight: 800;
  line-height: 1.2;
  color: #9f1239;
}
.reg-rejection__pill {
  margin-inline-start: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .7rem;
  border-radius: 9999px;
  font-size: .6875rem;
  font-weight: 700;
  color: #e11d48;
  background: rgba(244, 63, 94, .1);
  border: 1px solid rgba(244, 63, 94, .25);
}
.reg-rejection__pill::before {
  content: "";
  width: .4rem;
  height: .4rem;
  border-radius: 9999px;
  background: #f43f5e;
  box-shadow: 0 0 0 3px rgba(244, 63, 94, .2);
  animation: reg-rejection-blink 2s ease-in-out infinite;
}
@keyframes reg-rejection-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 3px rgba(244, 63, 94, .22); }
  50%      { opacity: .5; box-shadow: 0 0 0 5px rgba(244, 63, 94, .06); }
}
/* Reason shown as an elevated quote block */
.reg-rejection__reason {
  position: relative;
  padding: .75rem .9rem .75rem 2.1rem;
  border-radius: .75rem;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(244, 63, 94, .16);
  font-size: .9375rem;
  line-height: 1.7;
  font-weight: 500;
  color: #881337;
  word-break: break-word;
}
.reg-rejection__reason::before {
  content: "\201D"; /* ” — mirrors nicely in RTL */
  position: absolute;
  inset-block-start: .1rem;
  inset-inline-start: .55rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.9rem;
  line-height: 1;
  color: rgba(244, 63, 94, .4);
}
@media (prefers-reduced-motion: reduce) {
  .reg-rejection__pill::before { animation: none; }
}

/* ── Dark theme ── */
.dark .reg-rejection {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(244, 63, 94, .18) 0%, transparent 45%),
    linear-gradient(180deg, rgba(40, 12, 20, .55) 0%, rgba(30, 8, 14, .5) 100%);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, .3),
    0 14px 34px -14px rgba(0, 0, 0, .6);
}
.dark .reg-rejection::before {
  background: linear-gradient(150deg, rgba(251, 113, 133, .5), rgba(251, 113, 133, .08) 45%, rgba(251, 113, 133, .3));
}
.dark .reg-rejection__eyebrow { color: #fb7185; }
.dark .reg-rejection__title { color: #fecdd3; }
.dark .reg-rejection__pill {
  color: #fda4af;
  background: rgba(244, 63, 94, .14);
  border-color: rgba(244, 63, 94, .3);
}
.dark .reg-rejection__reason {
  background: rgba(0, 0, 0, .22);
  border-color: rgba(244, 63, 94, .22);
  color: #fecdd3;
}
.dark .reg-rejection__reason::before { color: rgba(251, 113, 133, .5); }

/* ═══════════════════════════════════════════════════════════════════════════
   Notes callout — informational message left on a registration by the review
   staff. Same anatomy as .reg-rejection (icon + heading + quoted body) but in
   a calm blue tone and without the alarm cues (no watermark, no blinking dot),
   since a note is context, not a warning. Component classes rather than
   Tailwind utilities so it survives the purged build.
   ═══════════════════════════════════════════════════════════════════════════ */
.reg-notes {
  position: relative;
  margin-bottom: 1.375rem;
  padding: 1.125rem 1.25rem;
  border-radius: 1.125rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, .72) 0%, rgba(240, 247, 255, .72) 100%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow:
    0 1px 1px rgba(29, 78, 216, .04),
    0 12px 32px -14px rgba(59, 130, 246, .3);
}
/* Gradient hairline border via mask (crisp on any background) */
.reg-notes::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(59, 130, 246, .45), rgba(59, 130, 246, .08) 45%, rgba(59, 130, 246, .3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.reg-notes__head {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .875rem;
}
.reg-notes__icon {
  flex-shrink: 0;
  width: 2.625rem;
  height: 2.625rem;
  border-radius: .875rem;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #60a5fa 0%, #2563eb 55%, #1d4ed8 100%);
  box-shadow:
    0 4px 12px -2px rgba(37, 99, 235, .5),
    inset 0 1px 0 rgba(255, 255, 255, .35);
}
.reg-notes__icon svg { width: 1.5rem; height: 1.5rem; }
.reg-notes__heading { min-width: 0; }
.reg-notes__eyebrow {
  display: block;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #2563eb;
  opacity: .8;
  margin-bottom: .1rem;
}
.reg-notes__title {
  font-size: .9375rem;
  font-weight: 800;
  line-height: 1.2;
  color: #1e40af;
}
.reg-notes__pill {
  margin-inline-start: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .7rem;
  border-radius: 9999px;
  font-size: .6875rem;
  font-weight: 700;
  color: #2563eb;
  background: rgba(59, 130, 246, .1);
  border: 1px solid rgba(59, 130, 246, .25);
}
/* Note body shown as an elevated quote block */
.reg-notes__body {
  position: relative;
  padding: .75rem .9rem .75rem 2.1rem;
  border-radius: .75rem;
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(59, 130, 246, .16);
  font-size: .9375rem;
  line-height: 1.7;
  font-weight: 500;
  color: #1e3a8a;
  white-space: pre-line;
  word-break: break-word;
}
.reg-notes__body::before {
  content: "\201D"; /* ” — mirrors nicely in RTL */
  position: absolute;
  inset-block-start: .1rem;
  inset-inline-start: .55rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.9rem;
  line-height: 1;
  color: rgba(59, 130, 246, .4);
}

/* ── Dark theme ── */
.dark .reg-notes {
  background: linear-gradient(180deg, rgba(12, 24, 45, .55) 0%, rgba(8, 17, 33, .5) 100%);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, .3),
    0 14px 34px -14px rgba(0, 0, 0, .6);
}
.dark .reg-notes::before {
  background: linear-gradient(150deg, rgba(96, 165, 250, .45), rgba(96, 165, 250, .07) 45%, rgba(96, 165, 250, .28));
}
.dark .reg-notes__eyebrow { color: #60a5fa; }
.dark .reg-notes__title { color: #dbeafe; }
.dark .reg-notes__pill {
  color: #93c5fd;
  background: rgba(59, 130, 246, .14);
  border-color: rgba(59, 130, 246, .3);
}
.dark .reg-notes__body {
  background: rgba(0, 0, 0, .22);
  border-color: rgba(59, 130, 246, .22);
  color: #dbeafe;
}
.dark .reg-notes__body::before { color: rgba(96, 165, 250, .5); }

/* ═══════════════════════════════════════════════════════════════════════════
   Application Progress Tracker (dashboard/student_dashboard.html)

   Written as dedicated component classes instead of Tailwind color utilities
   (bg-green-100, dark:bg-blue-900/20, etc.) because those never made it into
   the purged style.css build — see note below. Colors mirror the existing
   .reg-status-* / .doc-* palette above for visual consistency.
   ═══════════════════════════════════════════════════════════════════════════ */
.epnu-progress-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
}
.epnu-progress-badge svg { width: 1rem; height: 1rem; }

.epnu-progress-badge--done { background: #dcfce7; color: #16a34a; }
.epnu-progress-badge--pending { background: var(--epnu-surface, #f8fafc); color: var(--epnu-text-muted, #94a3b8); }
.epnu-progress-badge--rejected { background: #fee2e2; color: #dc2626; }

.dark .epnu-progress-badge--done { background: rgba(20, 83, 45, .35); color: #4ade80; }
.dark .epnu-progress-badge--pending { background: var(--epnu-bg-muted); color: #64748b; }
.dark .epnu-progress-badge--rejected { background: rgba(69, 10, 10, .4); color: #f87171; }

.epnu-progress-row-active { background: #dbeafe; }
.dark .epnu-progress-row-active { background: rgba(30, 58, 95, .55); }

.epnu-progress-row-rejected { background: #fee2e2; }
.dark .epnu-progress-row-rejected { background: rgba(69, 10, 10, .5); }

.epnu-progress-label-active { font-weight: 600; color: #1e40af; }
.dark .epnu-progress-label-active { color: #93c5fd; }

.epnu-progress-label-rejected { font-weight: 600; color: #991b1b; }
.dark .epnu-progress-label-rejected { color: #fca5a5; }

/* ═══════════════════════════════════════════════════════════════════════════
   Document lightbox — panel chrome + zoomable viewer.

   Both lightbox partials (document_lightbox_js.html, staff_registrations_filter_js.html)
   share these rules, so the panel exists in exactly one place. The partials keep
   only what is unique to them (staff: approve/reject actions, rejection modal).

   Colors go through the --epnu-* tokens, which .dark re-points in epnu-brand.css.
   Hardcoded literals here would stay light in dark mode — the same white-on-white
   trap documented at the top of this file.
   ═══════════════════════════════════════════════════════════════════════════ */

#doc-lightbox-overlay {
  position: fixed;
  inset: 0;
  /* Above the rejection modal (100000), which the staff lightbox opens behind it. */
  z-index: 100001;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

#doc-lightbox-overlay.open {
  opacity: 1;
  pointer-events: all;
}

#doc-lightbox-panel {
  background: var(--epnu-bg-elevated, #fff);
  border-radius: 18px;
  width: min(680px, 95vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .28);
  transform: scale(.93) translateY(14px);
  transition: transform .25s cubic-bezier(.34, 1.25, .64, 1), width .22s ease;
  direction: rtl;
  overflow: hidden;
}

#doc-lightbox-overlay.open #doc-lightbox-panel {
  transform: scale(1) translateY(0);
}

#doc-lightbox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--epnu-border, #e5e7eb);
  gap: 12px;
}

#doc-lightbox-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--epnu-text-primary, #1a1a2e);
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#doc-lightbox-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.doc-lb-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--epnu-border, #e5e7eb);
  background: transparent;
  cursor: pointer;
  color: var(--epnu-text-secondary, #6b7280);
  transition: background .15s, color .15s;
}

.doc-lb-icon-btn:hover {
  background: var(--epnu-bg-muted, #f3f4f6);
  color: var(--epnu-text-primary, #111827);
}

#doc-lightbox-body {
  flex: 1;
  overflow: hidden;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  position: relative;
}

#doc-lightbox-img-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--epnu-text-secondary, #6b7280);
  font-size: .85rem;
}

#doc-lightbox-img-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #ef4444;
  font-size: .85rem;
  text-align: center;
}
.dark #doc-lightbox-img-error { color: #fca5a5; }

#doc-lightbox-footer {
  padding: 14px 20px 18px;
  border-top: 1px solid var(--epnu-border, #e5e7eb);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

#doc-lightbox-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ── Doc thumb placeholder (opens the lightbox) ── */
.doc-thumb-wrap--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 10px;
  border: 1.5px dashed var(--epnu-border, #d1d5db);
  background: var(--epnu-bg-muted, #f9fafb);
  cursor: pointer;
  transition: border-color .18s, background .18s;
  position: relative;
  overflow: hidden;
}

.doc-thumb-wrap--placeholder:hover {
  border-color: #6366f1;
  background: #eef2ff;
}
.dark .doc-thumb-wrap--placeholder:hover {
  border-color: #818cf8;
  background: rgba(99, 102, 241, .16);
}

.doc-thumb-wrap--has-image {
  border: none;
  background: transparent;
}

.doc-thumb-placeholder-icon svg {
  width: 26px;
  height: 26px;
  color: var(--epnu-text-secondary, #9ca3af);
}

.doc-thumb-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: contents;
}

/* Clipping viewport. Sized in JS to the image's fitted box; the image fills it
   exactly, which is what makes Panzoom's contain:'outside' correct.
   Markup is built at runtime by static/js/src/doc-lightbox-zoom.js (Panzoom). */
.doc-lb-stage {
  position: relative;
  overflow: hidden;
  touch-action: none;
  border-radius: 10px;
  background: #f8fafc;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .12);
}
.dark .doc-lb-stage { background: #111827; }

#doc-lightbox-img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
}

#doc-lightbox-img.is-zoomed:active { cursor: grabbing; }

/* ── Header toolbar ── */
.doc-lb-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.doc-lb-zoom-level {
  min-width: 3.25rem;
  text-align: center;
  font-size: .72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #6b7280;
}
.dark .doc-lb-zoom-level { color: #9ca3af; }

.doc-lb-sep {
  width: 1px;
  height: 20px;
  background: var(--epnu-border, #e5e7eb);
}

.doc-lb-icon-btn:disabled { opacity: .4; cursor: default; }
.doc-lb-icon-btn:disabled:hover {
  background: transparent;
  color: var(--epnu-text-secondary, #6b7280);
}

/* Expanded ("تكبير العرض") mode — a wider panel for reading dense scans. */
#doc-lightbox-panel.is-expanded { width: min(1400px, 96vw); }

/* ═══════════════════════════════════════════════════════════════════════════
   Utility shims for the staff registration review pages.

   The project's Tailwind output (static/css/style.css) is a purged, pre-built
   file — utility classes that weren't in the template set at build time are
   absent, and there is no live Tailwind pipeline to regenerate it. These are
   the canonical Tailwind definitions for the handful of utilities the staff
   review pages rely on that got purged (also repairs the same latent gaps on
   other pages that use them, e.g. profiles/payment filters).
   ═══════════════════════════════════════════════════════════════════════════ */
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
.gap-1\.5 { gap: 0.375rem; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.w-24 { width: 6rem; }
.max-w-sm { max-width: 24rem; }
.min-w-\[12rem\] { min-width: 12rem; }
.bg-red-500 { background-color: #ef4444; }
.hover\:bg-red-600:hover { background-color: #dc2626; }
.hover\:bg-brand-600:hover { background-color: var(--color-brand-600, #3641f5); }