/* ==========================================================================
   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.

   Two classes, and the split matters. .is-stuck means "pinned" and carries only
   the chrome that costs no layout (shadow, corners). Everything that shortens
   the page waits for .is-collapsible, which the JS grants only when the content
   below the bar can survive losing that height — collapse a page that is barely
   taller than the viewport and scrollTop gets clamped, the bar unpins, and the
   two states flicker against each other. See canCollapse() in
   staff_registrations_filter_js.html.
   ═══════════════════════════════════════════════════════════════════════════ */
.reg-filter-bar {
  position: sticky;
  top: var(--epnu-navbar-h, 4.25rem);
  z-index: 40;
  margin-bottom: 1.5rem;
}

/* Zero-height marker the JS parks immediately before the bar to read its resting
   position; the pinned bar can no longer report it. Must stay layout-neutral. */
.reg-filter-sentinel {
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.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-collapsible: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-collapsible: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-collapsible: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;
}

/* Field sizing lives here, not on the elements. The templates used to carry
   `flex-1 min-w-[12rem] max-w-xs`, but style.css is a purged Tailwind build with
   no toolchain behind it and min-w-[12rem] / max-w-sm / w-24 were never emitted —
   so every field resolved to `flex: 1 1 0%` and the ten of them squashed onto one
   line instead of wrapping. A real flex-basis is what makes the wrap happen. */
.reg-filter-field {
  flex: 1 1 12rem;
  min-width: 12rem;
  max-width: 20rem;
}

/* Short, fixed-vocabulary fields (status, page size) — no reason to claim a
   full track. */
.reg-filter-field--narrow {
  flex: 0 1 10rem;
  min-width: 8rem;
}

/* Compact row only exists while the bar can collapse; 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-collapsible .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-collapsible .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); }

/* ── Percentage / consideration-score editor (staff, inside the details modal) ──
   Same surface/border vocabulary as .score-item so the editable pair reads as part
   of the الدرجات section rather than a bolted-on form. */
.reg-score-edit {
  margin-top: .875rem;
  padding: .875rem;
  background: var(--epnu-surface, #f8fafc);
  border: 1px solid var(--epnu-border, #e2e8f0);
  border-radius: 10px;
}
.reg-score-edit__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .75rem;
}
.reg-score-edit__field { display: block; min-width: 0; }
.reg-score-edit__label {
  display: block;
  font-size: .6875rem;
  font-weight: 600;
  color: var(--epnu-text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .3rem;
}
.reg-score-edit__input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: .5rem .65rem;
  border-radius: .625rem;
  border: 1px solid var(--epnu-border, #e2e8f0);
  background: var(--epnu-bg-input, #fff);
  color: var(--epnu-text-primary, #0d1b2a);
  font-family: inherit;
  font-size: .9375rem;
  font-weight: 700;
  /* Latin digits in an RTL panel: keep the number itself laid out LTR. */
  direction: ltr;
  text-align: right;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.reg-score-edit__input:focus {
  outline: none;
  border-color: rgba(59, 130, 246, .45);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}
/* Amber, and a step up in size from the .6875rem labels: this is the one thing in
   the editor the reviewer has to read before typing. Same amber pair as
   .notes-indicator so warnings stay one colour across the page. */
.reg-score-edit__hint {
  margin: .6rem 0 0;
  font-size: .875rem;
  line-height: 1.6;
  font-weight: 600;
  color: #b45309;                       /* amber-700 */
}
.reg-score-edit__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: .75rem;
}
.reg-score-edit__save {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .4rem .85rem;
  border-radius: .625rem;
  border: none;
  font-size: .75rem;
  font-weight: 700;
  font-family: inherit;
  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-score-edit__save:hover { filter: brightness(1.06); }
.reg-score-edit__save:active { transform: scale(.98); }
.reg-score-edit__save:disabled { opacity: .6; cursor: default; transform: none; }

/* ── 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,
.dark .reg-score-edit {
  background: var(--epnu-bg-muted);
  border-color: var(--epnu-border);
}
.dark .reg-score-edit__input {
  background: rgba(0, 0, 0, .22);
  border-color: var(--epnu-border);
  color: var(--epnu-text-primary);
}
.dark .reg-score-edit__input: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);
}
.dark .reg-score-edit__hint {
  color: #fbbf24;                       /* amber-400 */
}
.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);
}

/* Close is the one control that must never be hunted for. Solid red rather than
   the shared ghost styling: on a phone the header wraps into a cluster of a
   dozen identically sized icon buttons, and an outlined × disappears into it.
   The ID outranks .doc-lb-icon-btn:hover on its own, so no extra qualifier. */
#doc-lightbox-close {
  background: #ef4444;
  border-color: #ef4444;
  color: #fff;
}

#doc-lightbox-close:hover {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}

#doc-lightbox-close:active {
  transform: scale(0.96);
}

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

/* Rotation wrapper. Zoom is done in layout rather than with a transform, so rotating
   the image alone would leave the stage reserving the upright box — wrong scrollbars
   and unreachable edges on a quarter-turned scan. The rotor carries the *rotated*
   bounding box as its layout size; the image is centred inside it and rotated about
   that centre, so it fills the rotor exactly at every angle.
   Both are sized in JS by applyZoom() in static/js/src/doc-lightbox-zoom.js.

   flex: 0 0 auto — .doc-lb-canvas is a flex container and would otherwise shrink the
   rotor below the pixel size just written to it. */
.doc-lb-rotor {
  position: relative;
  flex: 0 0 auto;
}

#doc-lightbox-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center;
  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; }

/* ═══════════════════════════════════════════════════════════════════════════
   Responsive — phones and small tablets

   All of it lives here rather than as `sm:`/`md:` utilities in the templates:
   static/css/style.css is a pre-built, purged Tailwind artifact and this repo
   has no Tailwind toolchain, so a variant that isn't already in that file does
   nothing at all. Breakpoints match the ones epnu-brand.css already uses.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Results table (max-width: 767px) ─────────────────────────────────────
   The table stays a table and scrolls sideways — but deliberately. Without a
   min-width, `width: 100%` crams seven columns into ~330px and shreds every
   cell onto five lines; with one, the columns keep their natural size and the
   swipe becomes the interaction rather than the symptom. */
@media (max-width: 767px) {
  .reg-results-table {
    /* Keep the horizontal swipe inside the table: at the ends it would
       otherwise chain to the page and trigger back-navigation. */
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;

    /* Scroll affordance: two shadows painted on the scroll content (local) and
       two cover patches pinned to the frame (scroll). A shadow is only visible
       while the patch over it has been scrolled away, so each edge fades in
       exactly when there is more table in that direction. */
    background-image:
      linear-gradient(to right, rgba(13, 27, 42, 0.16), rgba(13, 27, 42, 0)),
      linear-gradient(to left, rgba(13, 27, 42, 0.16), rgba(13, 27, 42, 0)),
      linear-gradient(to right, var(--epnu-bg-elevated, #fff), rgba(255, 255, 255, 0)),
      linear-gradient(to left, var(--epnu-bg-elevated, #fff), rgba(255, 255, 255, 0));
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 14px 100%, 14px 100%, 24px 100%, 24px 100%;
    background-attachment: local, local, scroll, scroll;
  }

  .reg-results-table table {
    min-width: 44rem;
  }

  /* Beats the px-4 py-3 utilities on specificity (0,2,1 vs 0,1,0) — no
     !important needed. */
  .reg-results-table :is(th, td) {
    padding: 0.625rem 0.75rem;
  }

  .reg-notes-cell {
    max-width: 14rem;
  }

  .reg-empty {
    padding: 2.5rem 1.25rem;
  }
}

.dark .reg-results-table {
  /* Same four layers, repainted for the dark surface. */
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0)),
    linear-gradient(to left, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0)),
    linear-gradient(to right, var(--epnu-bg-elevated, #162636), rgba(22, 38, 54, 0)),
    linear-gradient(to left, var(--epnu-bg-elevated, #162636), rgba(22, 38, 54, 0));
}

/* ── Filter bar + details modal (max-width: 640px) ───────────────────────── */
@media (max-width: 640px) {
  /* One field per row. The desktop 12rem basis would otherwise leave two
     half-width fields on a 360px screen. */
  .reg-filter-field,
  .reg-filter-field--narrow {
    flex: 1 1 100%;
    min-width: 0;
    max-width: none;
  }

  /* Row 1 is the quick search on its own; row 2 is chips + «فلاتر» + بحث. */
  .reg-filter-quick {
    flex: 1 1 100%;
    max-width: none;
  }

  .reg-filter-compact {
    flex: 1 1 auto;
  }

  .reg-filter-card {
    padding: 0.75rem;
  }

  /* Expanded: all three actions get a full-width row and split it evenly, so
     بحث / مسح / تصدير are thumb-sized instead of trailing off the edge. */
  .reg-filter-actions {
    margin-inline-start: 0;
    width: 100%;
  }

  .reg-filter-actions > * {
    flex: 1 1 auto;
    justify-content: center;
  }

  /* Collapsed: clearing filters and exporting are not what anyone reaches for
     on a phone, and dropping them is what leaves room for بحث to sit on the
     same line as «فلاتر» instead of being pushed to a row of its own. */
  .reg-filter-bar.is-collapsible:not(.is-expanded) .reg-filter-clear,
  .reg-filter-bar.is-collapsible:not(.is-expanded) #btn-export-excel {
    display: none;
  }

  .reg-filter-bar.is-collapsible:not(.is-expanded) .reg-filter-actions {
    flex: 0 0 auto;
    width: auto;
    margin-inline-start: auto;
  }

  /* Expanded, the panel is taller than the viewport. Sticky would pin it over
     the results and give the page a second scroll container nested inside its
     own — the list scrolling away behind a bar that will not move. Dropping out
     of sticky puts the whole thing back in normal flow: one scrollbar, and the
     panel scrolls off like any other content. The JS scrolls the bar into view
     as it expands so this never reads as a jump (see scrollFilterBarIntoView). */
  .reg-filter-bar.is-expanded {
    position: static;
  }

  /* is-stuck is purely cosmetic (pinned shadow + squared top corners). A bar in
     normal flow should not wear it. */
  .reg-filter-bar.is-expanded.is-stuck .reg-filter-card {
    border-radius: 0.75rem;
    box-shadow: var(--epnu-soft-shadow, 0 1px 2px rgba(13, 27, 42, 0.06));
  }

  /* Details modal — see .cert-modal-* in epnu-brand.css for the bottom-sheet
     framing this sits inside. */
  .reg-modal-head {
    padding-inline-end: 2.25rem;
  }

  .reg-modal-actions > * {
    flex: 1 1 auto;
    justify-content: center;
  }

  /* ── Uploaded documents ──────────────────────────────────────────────────
     As a single flex row this reads as: thumbnail, a name squeezed to nothing,
     then the badge and معاينة wrapping onto their own line starting under the
     thumbnail. A two-column grid instead keeps the thumbnail beside a stacked
     name-over-actions column, and gives the rejection reason a full-width row
     of its own beneath both. */
  .doc-item--image {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "thumb body"
      "thumb actions"
      "rejection rejection";
    align-items: start;
    column-gap: 0.75rem;
    row-gap: 0.5rem;
  }

  .doc-item--image .doc-thumb-wrap { grid-area: thumb; }
  .doc-item--image .doc-body { grid-area: body; }
  .doc-item--image .doc-actions { grid-area: actions; }
  .doc-item--image .doc-rejection-wrap { grid-area: rejection; }

  .doc-thumb-wrap,
  .doc-thumb-wrap--placeholder {
    width: 3.75rem;
    height: 3.75rem;
  }

  /* The 8rem floor is a flex-row concern; inside a minmax(0, 1fr) track it just
     forces the grid wider than the modal. */
  .doc-name {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* ── Document viewer ─────────────────────────────────────────────────────
     Full-bleed on a phone: a scan is the whole reason the viewer is open, and
     the rounded 95vw card was spending the width on chrome. */
  #doc-lightbox-panel,
  #doc-lightbox-panel.is-expanded {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  /* The header holds the title plus up to ten icon buttons (zoom, fit, rotate,
     expand, gallery prev/next, open, close). Unwrapped that is ~520px against a
     360px panel, and since the panel clips its overflow the tail of the row —
     the close button — was being cut off entirely. Title takes its own line;
     the zoom toolbar scrolls sideways in what is left, so open and close stay
     on screen. */
  /* Top line is the title and the close button; the tool buttons drop below it.
     Close sits two levels deep in the markup (header > header-actions > close)
     and cannot reach the title's flex line while those wrappers are boxes, so
     both are dissolved with display: contents. That flattens the title, the
     toolbar buttons, the open link and close into items of one flex container,
     where `order` can place them freely. */
  #doc-lightbox-header {
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
  }

  #doc-lightbox-header-actions,
  .doc-lb-toolbar {
    display: contents;
  }

  #doc-lightbox-title {
    order: 0;
    flex: 1 1 auto;
    min-width: 0;
  }

  #doc-lightbox-close {
    order: 1;
  }

  /* Zero-height full-width item: the only way to force a line break at a chosen
     point in a wrapping flex container. Ordered between close and the tools, it
     guarantees the top line holds nothing else however few tools there are. */
  #doc-lightbox-header::after {
    content: '';
    order: 2;
    flex: 0 0 100%;
    height: 0;
  }

  #doc-lightbox-open-link,
  .doc-lb-toolbar > * {
    order: 3;
  }

  /* The buttons carry width: 34px but no flex-shrink, so in a container that is
     allowed to run short they compress to their icons rather than wrapping.
     Pinning the basis is what makes the row wrap instead of squeeze. */
  #doc-lightbox-header-actions > *,
  .doc-lb-toolbar > * {
    flex: 0 0 auto;
  }

  /* Grouping dividers mean nothing once the cluster wraps. */
  .doc-lb-sep {
    display: none;
  }

  #doc-lightbox-body { padding: 8px; }

  #doc-lightbox-footer { padding: 10px 12px 12px; }

  .doc-lb-thumbs { padding: 8px 12px; }

  .doc-lb-thumb {
    width: 40px;
    height: 40px;
  }
}