/* ==========================================================================
   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-6 { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }

/* Nomination results table — avoid purged Tailwind dark: utilities */
.reg-results-table {
  overflow-x: auto;
  background: var(--epnu-bg-elevated, #fff);
  border: 1px solid var(--epnu-border, #e2e8f0);
  border-radius: 0.5rem;
  box-shadow: var(--epnu-soft-shadow, 0 1px 2px rgba(13, 27, 42, 0.06));
  color: var(--epnu-text-primary, #0f172a);
}
.reg-results-table table {
  width: 100%;
  font-size: 0.875rem;
  text-align: right;
}
.reg-results-table thead {
  background: var(--epnu-bg-muted, #f1f5f9);
  color: var(--epnu-text-secondary, #64748b);
  border-bottom: 1px solid var(--epnu-border, #e2e8f0);
}
.reg-results-table tbody tr {
  border-bottom: 1px solid var(--epnu-border, #e2e8f0);
  transition: background-color .15s ease;
}
.reg-results-table tbody tr:hover {
  background: color-mix(in srgb, var(--epnu-bg-muted, #f1f5f9) 50%, transparent);
}
.reg-results-table .reg-results-desire {
  color: var(--epnu-text-primary, #0f172a);
}
.reg-results-table .reg-results-desire.is-selected,
.reg-results-desire.is-selected {
  background: color-mix(in srgb, var(--epnu-blue-500, #0077ff) 12%, var(--epnu-bg-elevated, #fff));
}
.dark .reg-results-table .reg-results-desire.is-selected,
.dark .reg-results-desire.is-selected {
  background: color-mix(in srgb, var(--epnu-blue-500, #0077ff) 22%, var(--epnu-bg-elevated, #162636));
}
.reg-results-faculty {
  display: inline-flex;
  align-items: center;
  max-width: 240px;
  border-radius: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--epnu-blue-500, #0077ff) 30%, transparent);
  background: #eff6ff;
  color: #1d4ed8;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
}
.reg-results-faculty--block {
  display: block;
  max-width: none;
}
.dark .reg-results-faculty {
  background: color-mix(in srgb, var(--epnu-blue-500, #0077ff) 15%, transparent);
  color: #60a5fa;
}
.reg-results-score {
  display: inline-flex;
  align-items: center;
  border-radius: 0.375rem;
  background: #f0fdf4;
  color: #15803d;
  padding: 0.125rem 0.375rem;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.dark .reg-results-score {
  background: color-mix(in srgb, #22c55e 15%, transparent);
  color: #4ade80;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Sticky filter bar
   (staff_registrations_filter_form.html / _detail_filter_form.html)

   The scroll container is .epnu-main and the navbar sticks at its top, so the bar
   pins at the navbar's measured height (--epnu-navbar-h, written by the filter JS).
   Once pinned it collapses: the field widgets fold away and a compact row of
   active-filter chips takes over, leaving the quick name search and the actions
   in place. Pressing "فلاتر" re-expands the fields without unpinning.
   ═══════════════════════════════════════════════════════════════════════════ */
.reg-filter-bar {
  position: sticky;
  top: var(--epnu-navbar-h, 4.25rem);
  z-index: 40;
  margin-bottom: 1.5rem;
}

.reg-filter-card {
  padding: 1rem;
  transition: padding .28s ease, border-radius .28s ease, box-shadow .28s ease;
}

.reg-filter-bar.is-stuck .reg-filter-card {
  border-radius: 0 0 0.75rem 0.75rem;
  box-shadow: 0 10px 24px rgba(13, 27, 42, .12);
}
.dark .reg-filter-bar.is-stuck .reg-filter-card {
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
}
.reg-filter-bar.is-stuck:not(.is-expanded) .reg-filter-card { padding: 0.625rem 1rem; }

/* Always-visible row: quick search · chips · actions. */
.reg-filter-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
}
.reg-filter-quick {
  flex: 1 1 14rem;
  max-width: 24rem;
  min-width: 0;
}
.reg-filter-quick > label {
  overflow: hidden;
  transition: max-height .28s ease, opacity .2s ease, margin-bottom .28s ease;
  max-height: 1.5rem;
  opacity: 1;
}
.reg-filter-bar.is-stuck:not(.is-expanded) .reg-filter-quick > label {
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
}

.reg-filter-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-inline-start: auto;
}

/* Collapsible field grid — animated, so pinning doesn't snap the layout.
   (display:none can't transition, hence max-height/opacity.) The max-height value
   itself is written by the filter JS from the grid's real content height, so the
   transition spends none of its duration on invisible slack. */
.reg-filter-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  margin-top: 1rem;
  opacity: 1;
  overflow: hidden;
  transition: max-height .3s ease, opacity .22s ease .06s, margin-top .3s ease;
}
.reg-filter-bar.is-stuck:not(.is-expanded) .reg-filter-grid {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  transition: max-height .28s ease, opacity .15s ease, margin-top .28s ease;
}

/* Compact row only exists while pinned; it fades in as the grid folds away. */
.reg-filter-compact {
  display: none;
  flex: 1 1 16rem;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding-bottom: 0.125rem;
}
.reg-filter-bar.is-stuck .reg-filter-compact {
  display: flex;
  animation: regFilterFadeIn .28s ease both;
}

@keyframes regFilterFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reg-filter-card,
  .reg-filter-grid,
  .reg-filter-quick > label { transition: none; }
  .reg-filter-bar.is-stuck .reg-filter-compact { animation: none; }
}

.reg-filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}

.reg-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 16rem;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--epnu-border, #e2e8f0);
  background: var(--epnu-bg-muted, #f1f5f9);
  color: var(--epnu-text-primary, #0f172a);
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
}
.reg-filter-chip > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}
.reg-filter-chip__remove {
  border: none;
  background: none;
  padding: 0 0.125rem;
  color: var(--epnu-text-secondary, #64748b);
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
}
.reg-filter-chip__remove:hover { color: #ef4444; }

.reg-filter-toggle,
.reg-filter-clear {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.5rem;
  border: 1px solid var(--epnu-border, #e2e8f0);
  background: var(--epnu-bg-elevated, #fff);
  color: var(--epnu-text-secondary, #64748b);
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s, opacity .15s;
}
.reg-filter-toggle svg,
.reg-filter-clear svg { width: 0.875rem; height: 0.875rem; }
.reg-filter-toggle:hover {
  border-color: var(--epnu-blue-500, #0077ff);
  color: var(--epnu-blue-500, #0077ff);
}
.reg-filter-bar.is-expanded .reg-filter-toggle {
  border-color: var(--epnu-blue-500, #0077ff);
  color: var(--epnu-blue-500, #0077ff);
}

/* Clearing filters is destructive — red, and always on screen next to بحث. */
.reg-filter-clear {
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-color: color-mix(in srgb, #ef4444 45%, transparent);
  background: color-mix(in srgb, #ef4444 10%, transparent);
  color: #dc2626;
}
.reg-filter-clear svg { width: 1rem; height: 1rem; }
.reg-filter-clear:not(:disabled):hover {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}
.reg-filter-clear:disabled { opacity: .5; cursor: default; }
.dark .reg-filter-clear { color: #fca5a5; }
.dark .reg-filter-clear:not(:disabled):hover { color: #fff; }

.reg-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--epnu-blue-500, #0077ff);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
}
.reg-filter-count[hidden] { display: none; }

/* No sticky <thead> here: .reg-results-table needs overflow-x:auto for narrow
   screens, which makes it the sticky containing block — a sticky header inside it
   would never pin against the page scroll. The pinned filter bar covers the need. */

/* ═══════════════════════════════════════════════════════════════════════════
   Staff registrations table row + details modal
   (templates/student/partials/staff_registrations_results.html)
   ═══════════════════════════════════════════════════════════════════════════ */

/* The row whose modal is currently open — also the row holding the soft lock. */
.reg-results-table tbody tr.reg-row.is-open {
  background: color-mix(in srgb, var(--epnu-blue-500, #0077ff) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--epnu-blue-500, #0077ff) 45%, transparent);
}

/* Notes flag next to the student name — the full text lives in the title
   attribute and the modal; JS keeps #notes-indicator-<id> in sync. */
.reg-note-flag { display: inline-flex; align-items: center; }
.reg-note-flag .notes-indicator {
  display: inline-flex;
  align-items: center;
}
.reg-note-flag .notes-indicator svg { width: 0.95rem; height: 0.95rem; }
.reg-note-flag .notes-indicator-text { display: none; }

.reg-desire-rank {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.375rem;
  background: color-mix(in srgb, var(--epnu-blue-500, #0077ff) 12%, transparent);
  color: var(--epnu-blue-500, #0077ff);
  font-size: 0.625rem;
  font-weight: 700;
}

/* Row action cluster — wraps rather than stretching the column. */
.reg-row-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
}

.reg-details-btn,
.reg-row-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid var(--epnu-border, #e2e8f0);
  background: var(--epnu-bg-elevated, #fff);
  color: var(--epnu-text-secondary, #64748b);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.reg-details-btn svg,
.reg-row-link svg { width: 0.875rem; height: 0.875rem; flex: 0 0 auto; }
.reg-details-btn:hover {
  border-color: var(--epnu-blue-500, #0077ff);
  color: var(--epnu-blue-500, #0077ff);
  background: color-mix(in srgb, var(--epnu-blue-500, #0077ff) 8%, transparent);
}

/* "كل الطلبات" — amber, to read as a jump away from this list rather than an
   action on this row. Dark text keeps it legible on yellow (white would not). */
.reg-row-link {
  background: #fbbf24;
  border-color: #f59e0b;
  color: #451a03 !important;
  font-weight: 700;
}
.reg-row-link:hover {
  background: #f59e0b;
  border-color: #d97706;
  color: #1c1917 !important;
}
.dark .reg-row-link {
  background: #f59e0b;
  border-color: #b45309;
  color: #1c1917 !important;
}
.dark .reg-row-link:hover {
  background: #fbbf24;
  border-color: #f59e0b;
}

/* Status count cell in the admissions overview — opens that admission filtered
   to the status the number refers to. */
.reg-count-btn {
  display: inline-flex;
  padding: 0.125rem;
  border: none;
  background: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: transform .1s ease;
}
.reg-count-btn:hover { transform: scale(1.08); }
.reg-count-btn:focus-visible {
  outline: 2px solid var(--epnu-blue-500, #0077ff);
  outline-offset: 2px;
}

/* ── Details modal (cert-modal-* chrome from epnu-brand.css) ── */
.reg-modal-panel { max-width: 56rem; }

.reg-modal-head {
  padding-inline-end: 2.5rem;   /* clears the absolutely-positioned close button */
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--epnu-border, #e2e8f0);
}

.reg-modal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--epnu-border, #e2e8f0);
}

/* The documents section runs straight into the notes block — give it room.
   Scoped to the modal so the student's own registrations page is unaffected. */
.reg-modal-panel .reg-notes {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--epnu-border, #e2e8f0);
}

/* "عرض كل الشهادات" — opens the viewer in gallery mode over every document. */
.doc-gallery-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--epnu-blue-500, #0077ff) 35%, transparent);
  background: color-mix(in srgb, var(--epnu-blue-500, #0077ff) 10%, transparent);
  color: var(--epnu-blue-500, #0077ff);
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.doc-gallery-btn svg { width: 0.875rem; height: 0.875rem; flex: 0 0 auto; }
.doc-gallery-btn:hover {
  background: color-mix(in srgb, var(--epnu-blue-500, #0077ff) 18%, transparent);
  border-color: var(--epnu-blue-500, #0077ff);
}

/* Freeze the real scroll container (.epnu-main) while a details modal is open.
   Unlike the cert-modal-open rules in epnu-brand.css this keeps the container's
   scrollTop, so closing the modal returns to the same row. */
body.reg-modal-open .epnu-main { overflow: hidden; }

/* WhatsApp action — solid green (Tailwind bg-green-* is purged from style.css) */
.reg-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.5rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
  background: #16a34a;
  color: #fff !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background .15s ease, transform .1s ease, color .15s ease;
}
.reg-whatsapp-btn:hover {
  background: #15803d;
  color: #fff !important;
}
.reg-whatsapp-btn:active {
  transform: scale(0.96);
}
.reg-whatsapp-btn svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  fill: currentColor;
}
.dark .reg-whatsapp-btn {
  background: #22c55e;
  color: #052e16 !important;
}
.dark .reg-whatsapp-btn:hover {
  background: #16a34a;
  color: #fff !important;
}
.reg-whatsapp-btn.is-clicked {
  background: #94a3b8;
  color: #fff !important;
}
.reg-whatsapp-btn.is-clicked:hover {
  background: #64748b;
  color: #fff !important;
}
.dark .reg-whatsapp-btn.is-clicked {
  background: #475569;
  color: #e2e8f0 !important;
}
.dark .reg-whatsapp-btn.is-clicked:hover {
  background: #64748b;
  color: #fff !important;
}
.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; }
.dark .reg-status-6 { background: #451a03; color: #fcd34d; border-color: #92400e; }

/* ── 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 {
  position: relative;
  padding: 1.125rem 1.25rem;
  border-bottom: 1px solid var(--epnu-border, #e2e8f0);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-start;
  gap: .75rem;
  background: linear-gradient(135deg,rgba(0,119,255,.04) 0%,transparent 60%);
}

/* Actions/status badge — sit at the bottom-left of the header. */
.reg-card__actions {
  margin-inline-start: auto;
  flex: 0 0 auto;
}

.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 registration details modal (99999); the rejection-reason modal
     (100010) in turn opens above this one. */
  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;
}

/* The rejection-reason modal (z-index 100010) opens *over* the viewer rather than
   closing it, so the reviewer keeps their place in the document gallery. This class
   only stops the viewer from swallowing clicks while that modal is up. */
#doc-lightbox-overlay.is-behind { pointer-events: none; }

#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;
}

/* Loading / error states now live inside the stage (.doc-lb-loading /
   .doc-lb-message), owned by static/js/src/doc-lightbox-zoom.js. */

#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;
}

/* Scrolling viewport, sized in JS to the panel's available box. Zooming resizes the
   image in layout (not with a transform), so the stage scrolls instead of panning —
   which is what lets any zoom at or above fit-width use the panel's full width, with
   no letterbox gutters to drag into.
   Markup is built at runtime by static/js/src/doc-lightbox-zoom.js. */
.doc-lb-stage {
  position: relative;
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: 10px;
  background: #f8fafc;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .12);
}
.dark .doc-lb-stage { background: #111827; }

.doc-lb-stage.is-pannable { cursor: grab; }
.doc-lb-stage.is-dragging { cursor: grabbing; }

/* fit-content keeps the picture centred while it is smaller than the stage;
   min-*: 100% keeps every edge scrollable once it is larger. */
.doc-lb-canvas {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: fit-content;
  min-width: 100%;
  min-height: 100%;
}

#doc-lightbox-img {
  display: block;
  max-width: none;
  max-height: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Loading / error overlays live inside the stage so navigation chrome stays put. */
.doc-lb-loading,
.doc-lb-message {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 1rem;
  text-align: center;
  font-size: .85rem;
  pointer-events: none;
}
.doc-lb-loading { color: var(--epnu-text-secondary, #6b7280); }
.doc-lb-message { color: #ef4444; }
.dark .doc-lb-message { color: #fca5a5; }

/* ── 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);
}

.doc-lb-icon-btn[aria-pressed="true"] {
  background: color-mix(in srgb, var(--epnu-blue-500, #0077ff) 12%, transparent);
  border-color: color-mix(in srgb, var(--epnu-blue-500, #0077ff) 45%, transparent);
  color: var(--epnu-blue-500, #0077ff);
}

/* ── Gallery ("عرض كل المستندات") ── */
.doc-lb-counter {
  min-width: 3rem;
  text-align: center;
  font-size: .72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #6b7280;
}
.dark .doc-lb-counter { color: #9ca3af; }

/* Thumbnail strip — inserted between the body and the footer.
   overflow-y must be stated: leaving it `visible` makes it compute to `auto`
   alongside overflow-x, and the horizontal scrollbar's own height is then enough
   to trigger a pointless vertical scrollbar. */
.doc-lb-thumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 0 0 auto;
  scrollbar-width: thin;
  border-top: 1px solid var(--epnu-border, #e5e7eb);
}

.doc-lb-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
  border: 1.5px solid var(--epnu-border, #e5e7eb);
  background: var(--epnu-bg-muted, #f3f4f6);
  color: var(--epnu-text-secondary, #6b7280);
  cursor: pointer;
  transition: border-color .15s, transform .1s;
}
.doc-lb-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.doc-lb-thumb:hover { border-color: var(--epnu-blue-500, #0077ff); }
.doc-lb-thumb.is-active {
  border-color: var(--epnu-blue-500, #0077ff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--epnu-blue-500, #0077ff) 30%, transparent);
}

/* 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); }
.min-w-0 { min-width: 0; }
.items-baseline { align-items: baseline; }
.shrink-0 { flex-shrink: 0; }
.w-56 { width: 14rem; }
.w-64 { width: 16rem; }
.w-72 { width: 18rem; }

/* ── Notes edit form — shares .reg-notes chrome; editable body + save ── */
.reg-notes__textarea {
  display: block;
  width: 100%;
  resize: vertical;
  min-height: 4.5rem;
  padding: .75rem .9rem;
  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;
  font-family: inherit;
  color: #1e3a8a;
  white-space: pre-line;
  word-break: break-word;
}
.reg-notes__textarea::placeholder {
  color: rgba(37, 99, 235, .45);
  font-weight: 500;
}
.reg-notes__textarea:focus {
  outline: none;
  border-color: rgba(59, 130, 246, .45);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
  background: rgba(255, 255, 255, .85);
}
.reg-notes__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: .75rem;
}
.reg-notes__save {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .4rem .85rem;
  border-radius: .625rem;
  border: none;
  font-size: .75rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(145deg, #60a5fa 0%, #2563eb 55%, #1d4ed8 100%);
  box-shadow: 0 4px 12px -2px rgba(37, 99, 235, .45);
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
.reg-notes__save:hover {
  filter: brightness(1.06);
}
.reg-notes__save:active {
  transform: scale(.98);
}

.dark .reg-notes__textarea {
  background: rgba(0, 0, 0, .22);
  border-color: rgba(59, 130, 246, .22);
  color: #dbeafe;
}
.dark .reg-notes__textarea::placeholder {
  color: rgba(147, 197, 253, .45);
}
.dark .reg-notes__textarea:focus {
  border-color: rgba(96, 165, 250, .5);
  background: rgba(0, 0, 0, .35);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .2);
}

/* ── Header notes indicator (distinct amber highlight) ── */
.notes-indicator {
  color: #b45309;                       /* amber-700 */
  font-weight: 600;
}
.notes-indicator .notes-indicator-text {
  font-weight: 500;
}
.dark .notes-indicator {
  color: #fbbf24;                       /* amber-400 */
}

/* ── Table notes column (yellowish dark highlight) ── */
.reg-notes-cell {
  font-size: 0.75rem;
  line-height: 1.45;
  padding: 0.4rem 0.55rem;
  border-radius: 0.5rem;
  color: #78350f;                       /* amber-900 */
  background: linear-gradient(180deg, #fef9c3 0%, #fde68a 100%);
  border: 1px solid rgba(180, 83, 9, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.reg-notes-cell.is-empty {
  color: var(--epnu-text-secondary, #64748b);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding: 0;
}
.dark .reg-notes-cell {
  color: #fcd34d;                       /* amber-300 */
  background: linear-gradient(180deg, rgba(69, 26, 3, 0.85) 0%, rgba(41, 15, 2, 0.92) 100%);
  border-color: rgba(251, 191, 36, 0.28);
  box-shadow: inset 0 1px 0 rgba(251, 191, 36, 0.08);
}
.dark .reg-notes-cell.is-empty {
  color: rgba(255, 255, 255, 0.45);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.ms-auto { margin-inline-start: auto; }