/*
 * Card Modal - Collection view and admin: tap a card to see details
 * Uses app dark theme; centered layout; first edition glow
 * Shared by #cardModal (public) and #adminCardModal (admin) so both stay on theme
 */

/* Center modal dialog in viewport (desktop and narrow) - only when modal is shown */
#cardModal.modal.show,
#adminCardModal.modal.show {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

#cardModal .modal-dialog,
#adminCardModal .modal-dialog {
  margin-left: auto;
  margin-right: auto;
  max-width: calc(100vw - var(--space-4) * 2);
}

/* Mobile: narrower than the panels behind so it reads as a focused overlay */
@media (max-width: 767px) {
  #cardModal .modal-dialog,
  #adminCardModal .modal-dialog {
    max-width: min(320px, calc(100vw - var(--space-4) * 2));
  }
}

/* Desktop: narrow panel for breathing room */
@media (min-width: 768px) {
  #cardModal .modal-dialog,
  #adminCardModal .modal-dialog {
    max-width: 400px;
  }
}

#cardModal .modal-content,
#adminCardModal .modal-content {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  color: var(--text-primary);
  box-shadow: var(--shadow-xl);
}

#cardModal .modal-header,
#adminCardModal .modal-header {
  background: var(--bg-tertiary);
  border-bottom-color: var(--border-primary);
  color: var(--text-primary);
  justify-content: center;
  text-align: center;
  position: relative;
  padding-right: 3.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Close button: inset from edge so X is centered in corner on narrow view */
#cardModal .card-modal-close,
#adminCardModal .card-modal-close {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0.75rem;
  margin: 0;
}

#cardModal .modal-title,
#adminCardModal .modal-title {
  color: var(--text-primary);
  margin: 0;
}

#cardModal .modal-body,
#adminCardModal .modal-body {
  background: var(--bg-secondary);
  color: var(--text-primary);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#cardModal .modal-body > p.card-modal-serial-outer,
#adminCardModal .modal-body > p.card-modal-serial-outer {
  align-self: flex-start;
  margin-bottom: var(--space-2);
}

#cardModal .modal-body > p.card-modal-serial-outer.d-none,
#adminCardModal .modal-body > p.card-modal-serial-outer.d-none {
  display: none !important;
}

#cardModal .card-modal-content-wrap,
#adminCardModal .card-modal-content-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Serial number inside card frame, top left */
#cardModal .card-modal-serial,
#adminCardModal .card-modal-serial {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  font-size: 0.7rem;
  color: var(--text-tertiary);
}

/* First edition badge: top right of card */
#cardModal .card-modal-first-edition-badge,
#adminCardModal .card-modal-first-edition-badge {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  font-size: 0.65rem;
  padding: 0.15rem 0.4rem;
}

/* You own this card dot: bottom right of modal card */
#cardModal .card-modal-you-own-dot,
#adminCardModal .card-modal-you-own-dot {
  position: absolute;
  bottom: var(--space-2);
  right: var(--space-2);
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bs-success, #198754);
}

/* Inner "card" box that holds serial, emoji, name, blurb, footer */
#cardModal .card-modal-card,
#adminCardModal .card-modal-card {
  position: relative;
  width: 100%;
  max-width: 320px;
  padding: var(--space-6);
  padding-top: var(--space-8);
  min-height: 200px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-secondary);
  background: var(--bg-elevated);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  overflow: visible;
}

/* Rarity-colored outline (non-common); first edition is badge only, not border */
#cardModal .card-modal-card--uncommon,
#adminCardModal .card-modal-card--uncommon {
  border-color: rgba(196, 196, 196, 0.7);
  box-shadow: 0 0 0 1px rgba(196, 196, 196, 0.5);
}

#cardModal .card-modal-card--rare,
#adminCardModal .card-modal-card--rare {
  border-color: rgba(255, 215, 0, 0.6);
  box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.4);
}

#cardModal .card-modal-card--super_rare,
#adminCardModal .card-modal-card--super_rare {
  border-color: rgba(239, 68, 68, 0.6);
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.4);
}

#cardModal .card-modal-card--legendary,
#adminCardModal .card-modal-card--legendary {
  border-color: rgba(168, 85, 247, 0.6);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.4);
}

/* Faded when the collection owner doesn't have the card (not about the viewer) */
#cardModal .card-modal-card--faded,
#adminCardModal .card-modal-card--faded {
  opacity: 0.75;
}

#cardModal .card-modal-card--faded.card-modal-card--uncommon,
#adminCardModal .card-modal-card--faded.card-modal-card--uncommon,
#cardModal .card-modal-card--faded.card-modal-card--rare,
#adminCardModal .card-modal-card--faded.card-modal-card--rare,
#cardModal .card-modal-card--faded.card-modal-card--super_rare,
#adminCardModal .card-modal-card--faded.card-modal-card--super_rare,
#cardModal .card-modal-card--faded.card-modal-card--legendary,
#adminCardModal .card-modal-card--faded.card-modal-card--legendary {
  opacity: 0.7;
}

#cardModal .card-modal-card .card-modal-emoji,
#adminCardModal .card-modal-card .card-modal-emoji {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: var(--space-1);
}

/* Placeholder ? emoji when no one has collected the card yet */
#cardModal .card-modal-card .card-modal-emoji-unowned,
#adminCardModal .card-modal-card .card-modal-emoji-unowned {
  opacity: 0.5;
}

#cardModal .card-modal-card .card-modal-name,
#adminCardModal .card-modal-card .card-modal-name {
  margin: 0;
  color: var(--text-primary);
  font-weight: 600;
}

#cardModal .card-modal-card .card-modal-meta,
#adminCardModal .card-modal-card .card-modal-meta {
  color: var(--text-tertiary);
  font-size: 0.875rem;
  margin: 0;
}

#cardModal .card-modal-card .card-modal-blurb,
#adminCardModal .card-modal-card .card-modal-blurb {
  color: var(--text-secondary);
  font-size: 0.875rem;
  margin: 0;
  text-align: center;
  line-height: 1.5;
  min-height: 3.5rem;
  flex: 1;
}

/* Bottom: left = badges, center = quantity, right = first collected by */
#cardModal .card-modal-card-footer,
#adminCardModal .card-modal-card-footer {
  width: calc(100% + 2 * var(--space-6));
  margin-top: auto;
  margin-bottom: calc(-1 * var(--space-6));
  margin-left: calc(-1 * var(--space-6));
  margin-right: calc(-1 * var(--space-6));
  padding: var(--space-2) var(--space-6);
  border-top: 1px solid var(--border-primary);
  background: var(--bg-tertiary);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.75rem;
  color: var(--text-tertiary);
  white-space: nowrap;
}

#cardModal .card-modal-card-footer-left,
#adminCardModal .card-modal-card-footer-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: flex-start;
}

#cardModal .card-modal-card-footer-center,
#adminCardModal .card-modal-card-footer-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

#cardModal .card-modal-card-footer-right,
#adminCardModal .card-modal-card-footer-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
  min-width: 0;
}

#cardModal .card-modal-card-footer .card-modal-first-collector,
#adminCardModal .card-modal-card-footer .card-modal-first-collector {
  font-size: 0.65rem;
  color: var(--text-tertiary);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
}

#cardModal .card-modal-card-footer .card-modal-rarity-badge,
#adminCardModal .card-modal-card-footer .card-modal-rarity-badge {
  margin: 0;
  font-size: 0.65rem;
  padding: 0.15rem 0.4rem;
  flex-shrink: 0;
  font-weight: 600;
  text-transform: capitalize;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid currentColor;
  width: fit-content;
}

#cardModal .card-modal-card-footer .card-modal-qty,
#adminCardModal .card-modal-card-footer .card-modal-qty {
  margin: 0;
  flex-shrink: 0;
}

#cardModal .card-modal-card-footer .badge,
#adminCardModal .card-modal-card-footer .badge {
  font-size: 0.65rem;
  padding: 0.15rem 0.4rem;
  flex-shrink: 0;
}

@media (max-width: 340px) {
  #cardModal .card-modal-card-footer,
  #adminCardModal .card-modal-card-footer {
    white-space: normal;
  }

  #cardModal .card-modal-card-footer .card-modal-first-collector,
  #adminCardModal .card-modal-card-footer .card-modal-first-collector {
    white-space: normal;
  }
}

#cardModal .card-modal-unowned,
#adminCardModal .card-modal-unowned {
  text-align: center;
  color: var(--text-tertiary);
  padding: var(--space-4);
}

/* Close button: visible on dark background */
#cardModal .btn-close,
#adminCardModal .btn-close {
  filter: invert(1);
  opacity: 0.7;
}

#cardModal .btn-close:hover,
#adminCardModal .btn-close:hover {
  opacity: 1;
}

/* Close button below the card */
#cardModal .card-modal-close-footer,
#adminCardModal .card-modal-close-footer {
  text-align: center;
}

/*
 * Rarity colors - used in admin card list and anywhere rarity letter is shown
 * Common = muted gray, Uncommon = clearer silver (more contrast with C)
 */
.card-rarity-common {
  color: var(--text-tertiary);
}

.card-rarity-uncommon {
  color: #d4d4d4;
}

.card-rarity-rare {
  color: #ffd700;
}

.card-rarity-super_rare {
  color: #ef4444;
}

.card-rarity-legendary {
  color: #a855f7;
}