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

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

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

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

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

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

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

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

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

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

.reg-card__body { padding: 1.25rem; }

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

/* ── Info grid ────────────────────────────────────────────────────────── */
.reg-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: .75rem;
}
.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;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--epnu-text-primary, #0d1b2a);
}

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

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

.doc-thumb-wrap--broken .doc-thumb-img {
  display: none;
}

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

.doc-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}

.doc-thumb-btn:hover .doc-thumb-img {
  transform: scale(1.06);
}

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

/* ── Secondary "open" link variant ──────────────────────────────────────── */
.doc-view-link--secondary {
  background: rgba(100,116,139,.08);
  color: var(--epnu-text-muted, #64748b);
}
.doc-view-link--secondary:hover { background: rgba(100,116,139,.16); }

/* ═══════════════════════════════════════════════════════════════════════════
   Lightbox
   ═══════════════════════════════════════════════════════════════════════════ */

/* Backdrop */
.doc-lightbox-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, .75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Panel */
.doc-lightbox-panel {
  display: flex;
  flex-direction: column;
  width: min(90vw, 52rem);
  max-height: 90vh;
  background: var(--epnu-elevated, #fff);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}

/* Header */
.doc-lightbox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .875rem 1.125rem;
  border-bottom: 1px solid var(--epnu-border, #e2e8f0);
  background: var(--epnu-surface, #f8fafc);
  flex-shrink: 0;
}

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

/* Action (open in new tab) button */
.doc-lightbox-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  color: var(--epnu-text-muted, #64748b);
  background: transparent;
  transition: background .15s ease, color .15s ease;
}
.doc-lightbox-action-btn svg { width: 1rem; height: 1rem; }
.doc-lightbox-action-btn:hover {
  background: rgba(0,119,255,.1);
  color: var(--epnu-brand, #0077ff);
}

/* Close button */
.doc-lightbox-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--epnu-text-muted, #64748b);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.doc-lightbox-close svg { width: 1rem; height: 1rem; }
.doc-lightbox-close:hover {
  background: #fee2e2;
  color: #991b1b;
}

/* Image area */
.doc-lightbox-body {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: #0d1b2a;
}

.doc-lightbox-img {
  max-width: 100%;
  max-height: calc(90vh - 8rem);
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}

/* Footer */
.doc-lightbox-footer {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1.125rem;
  border-top: 1px solid var(--epnu-border, #e2e8f0);
  background: var(--epnu-surface, #f8fafc);
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ── 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-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);
}
.dark .doc-lightbox-panel {
  background: var(--epnu-bg-elevated);
  border: 1px solid var(--epnu-border);
}
.dark .doc-lightbox-header,
.dark .doc-lightbox-footer {
  background: var(--epnu-bg-muted);
  border-color: var(--epnu-border);
}
.dark .doc-lightbox-close:hover {
  background: rgba(239, 68, 68, .15);
  color: #f87171;
}