/* =========================================
   POKEDEX (/pokedex + /pokedex/<nr>)
   Schicht 1: strukturelle Regeln (beide Themes, Bootstrap-Variablen)
   Schicht 2: CI-2026-Feinschliff, gescoped auf .theme-new (skw-Tokens)
   ========================================= */

/* ---- Schicht 1: Struktur ---- */

.pdx-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}
.pdx-head-text { flex: 1 1 340px; min-width: 0; }
.pdx-title { font-size: 1.6rem; font-weight: 700; margin: 0; }
.pdx-title-nr { color: var(--bs-secondary-color); font-weight: 500; }
.pdx-sub { color: var(--bs-secondary-color); font-size: 0.9rem; }

.pdx-stats {
  flex: 0 1 300px;
  min-width: 250px;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 12px;
  padding: 14px 16px;
}
.pdx-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.9rem;
  gap: 12px;
}
.pdx-stat-row strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.pdx-progress {
  height: 6px;
  border-radius: 3px;
  background: var(--bs-secondary-bg);
  margin: 8px 0 10px;
  overflow: hidden;
}
.pdx-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--bs-primary);
  transition: width 320ms ease;
}

.pdx-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* Suchfeld, Auswahlliste und Pillen auf EINE Hoehe (32px, wie die Icon-Buttons
   in der Sammlung). Vorher war das Bootstrap-Suchfeld sichtbar hoeher als die
   Knoepfe daneben — Norman 29.07.2026. */
/* Nachtrag 11.09.2026: die Regel stand hier ohne `.theme-new` und hat nie
   gegriffen — `.theme-new .form-select` hat die hoehere Spezifitaet und setzte
   weiter 9px Innenabstand oben/unten bei 18px Zeilenhoehe. In der 32px-Box
   ergab das 36px Inhalt, wodurch der Text der Auswahlliste sichtbar tiefer sass
   als im Suchfeld daneben (Norman-Report mit Screenshot). Deshalb `!important`
   und `line-height: 1` — gleiche Familie wie die Datumsfeld-Falle vom
   24.07.2026: Box-Hoehe messen reicht nicht, die TEXTLAGE im Feld pruefen. */
.theme-new .pdx-search,
.theme-new .pdx-genselect,
.pdx-search,
.pdx-genselect {
  height: 32px !important;
  min-height: 32px !important;   /* form-control-sm bringt eine eigene min-height mit */
  box-sizing: border-box;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1 !important;
}
.pdx-search { max-width: 220px; }
.pdx-genselect { max-width: 210px; }
.pdx-count { font-size: 0.82rem; color: var(--bs-secondary-color); }

.pdx-pillgroup { display: inline-flex; gap: 4px; }
.pdx-pill {
  border: 1px solid var(--bs-border-color);
  background: transparent;
  color: inherit;
  border-radius: 8px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  font-size: 0.84rem;
  line-height: 1;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.pdx-pill:hover { background: var(--bs-secondary-bg); }
/* Als Link genutzt (Freundes-Sichten, 11.09.2026): ohne das kommt der
   Browser-Unterstrich dazu und die Pille sieht aus wie ein Textlink. */
a.pdx-pill, a.pdx-pill:hover { text-decoration: none; }
.pdx-pill.active {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}

/* Als Binder anlegen (Binder C, 14.10.2026): Fenster #pdxBinderModal */
.pdx-binder-info { font-size: 0.84rem; color: var(--bs-secondary-color); margin-bottom: 0.9rem; }
.pdx-binder-feld { display: block; font-size: 0.68rem; font-weight: 700; color: var(--bs-secondary-color);
                   text-transform: uppercase; letter-spacing: .3px; margin-bottom: 6px; }
#pdxBinderModal .pdx-pillgroup { display: flex; flex-wrap: wrap; }
.pdx-binder-vorschau { padding: 10px 12px; border-radius: 10px; background: var(--bs-primary-bg-subtle, rgba(99,102,241,0.12));
                       font-size: 0.84rem; }
.pdx-binder-vorschau strong { display: block; }
.pdx-binder-hinweis { margin-top: 4px; color: var(--bs-secondary-color); font-size: 0.8rem; }

.pdx-gen-header,
.pdx-section-header {
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0 0 14px 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.pdx-gen-meta {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--bs-secondary-color);
}

.pdx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
}
@media (max-width: 576px) {
  .pdx-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
}

.pdx-tile {
  display: block;
  background: var(--bs-secondary-bg);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 120ms ease, opacity 120ms ease;
}
a.pdx-tile:hover { transform: translateY(-2px); color: inherit; }
.pdx-missing { opacity: 0.55; }
a.pdx-missing:hover { opacity: 1; }

.pdx-tile-img {
  position: relative;
  aspect-ratio: 245 / 342;
  background: var(--bs-tertiary-bg);
  overflow: hidden;
}
.pdx-tile-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* Artwork-Platzhalter (nicht gefangen / Gast): etwas Luft, damit das Motiv
   nicht an den Kachelrand stoesst */
.pdx-tile-img img.pdx-artwork { padding: 12%; box-sizing: border-box; }
/* Eingeloggt + fehlt: Artwork entsaettigt (Dimmen kommt von .pdx-missing) */
.pdx-missing .pdx-artwork { filter: grayscale(1); }

/* Der Teilen-Button im Statistik-Panel sitzt seit 29.07.2026 auf der
   gemeinsamen .skw-icon-btn-Optik (style.new-sammlung.css) — dieselbe wie in
   /sammlung und im Set-Modal. Hier braucht es deshalb keine Sonderregel mehr. */

/* Geteilter Set-Stand (/t/<token>): fehlende Karten entsaettigt.
   Das Dimmen kommt wie beim Pokedex von .pdx-missing. */
.pdx-missing .sh-grau { filter: grayscale(1); }

/* Varianten-Pillen auf der geteilten Kachel (Reverse Holo & Co.).
   Gefuellt = vorhanden, nur umrandet = fehlt. Bildsprache wie .skw-vpill im
   Set-Modal, aber eigenstaendig, damit die geteilte Seite ohne die
   Sammlungs-Styles auskommt. */
.sh-vpills { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.sh-vpill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  border: 1px solid var(--skw-border-strong, rgba(15, 15, 35, 0.20));
  background: transparent;
  color: var(--skw-text-soft, #94A3B8);
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
}
.sh-vpill-hat {
  background: var(--skw-accent, #6366F1);
  border-color: var(--skw-accent, #6366F1);
  color: #fff;
}
/* In der ausgegrauten Kachel sollen die Pillen lesbar bleiben */
.pdx-missing .sh-vpills { opacity: 1; }

/* Legende auf der geteilten Set-Seite: erklaert farbig/grau ohne auf eine
   Position im Layout zu verweisen. */
.sh-legende {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 0.82rem;
  color: var(--bs-secondary-color);
}
.theme-new .sh-legende { color: var(--skw-text-soft, #94A3B8); }
.sh-legende span { display: inline-flex; align-items: center; gap: 6px; }
.sh-dot {
  width: 11px;
  height: 15px;
  border-radius: 2px;
  background: var(--bs-secondary-bg, #d7d7dd);
  filter: grayscale(1);
  opacity: 0.55;
  flex: 0 0 auto;
}
.sh-dot-hat {
  background: var(--skw-accent, #6366F1);
  filter: none;
  opacity: 1;
}

/* Absenderzeile geteilter Links (10.09.2026): steht nur da, wenn der Teilende
   einen Profilnamen gesetzt und die Anzeige eingeschaltet hat. Bewusst klein und
   ohne eigene Flaeche - der Sammelstand ist der Inhalt, der Absender Beischrift. */
.sh-absender {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--bs-secondary-color);
}
.theme-new .sh-absender { color: var(--skw-text-soft, #94A3B8); }
.sh-absender strong { color: var(--skw-text, #0F0F23); font-weight: 600; }
.sh-absender i { font-size: 0.92em; opacity: 0.75; }

/* Nachricht des Teilenden ueber einer geteilten Wunschliste */
.sh-nachricht {
  font-size: 1.02rem;
  font-style: italic;
  color: var(--skw-text, #0F0F23);
  border-left: 3px solid var(--skw-accent, #6366F1);
  padding-left: 10px;
  margin-top: 6px;
  max-width: 46rem;
  overflow-wrap: anywhere;
}

/* Artwork im Kopf der Detailseite */
.pdx-mon-art {
  width: 84px;
  height: 84px;
  object-fit: contain;
  flex: 0 0 auto;
}
.pdx-noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  color: var(--bs-secondary-color);
}
.pdx-check {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--bs-primary);
  background: var(--bs-body-bg);
  border-radius: 999px;
}

.pdx-tile-info { padding: 8px 10px 10px; }
.pdx-tile-name {
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pdx-tile-nr { color: var(--bs-secondary-color); font-weight: 500; }
.pdx-tile-typen {
  font-size: 0.72rem;
  color: var(--bs-secondary-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pdx-typ {
  display: inline-block;
  border-radius: 8px;
  padding: 3px 10px;
  font-size: 0.78rem;
  font-weight: 500;
  background: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}

.pdx-back,
.pdx-nav-link {
  font-size: 0.88rem;
  text-decoration: none;
  color: var(--bs-secondary-color);
}
.pdx-back:hover,
.pdx-nav-link:hover { color: var(--bs-body-color); }

.pdx-hidden { display: none !important; }

/* ---- Schicht 2: CI 2026 (skw-Tokens) ---- */

.theme-new .pdx-title,
.theme-new .pdx-gen-header,
.theme-new .pdx-section-header { font-family: var(--skw-font); color: var(--skw-text); }
.theme-new .pdx-title { font-size: var(--skw-fs-h1); }
.theme-new .pdx-title-nr,
.theme-new .pdx-tile-nr,
.theme-new .pdx-sub,
.theme-new .pdx-gen-meta,
.theme-new .pdx-count,
.theme-new .pdx-tile-typen,
.theme-new .pdx-noimg { color: var(--skw-text-soft); }

.theme-new .pdx-stats {
  background: var(--skw-surface);
  border-color: var(--skw-border);
  border-radius: var(--skw-radius-lg);
  box-shadow: var(--skw-shadow-xs);
}
.theme-new .pdx-stat-row span { color: var(--skw-text-muted); }
.theme-new .pdx-stat-row strong { color: var(--skw-text); }
.theme-new .pdx-progress { background: var(--skw-surface-2); }
.theme-new .pdx-progress-fill { background: var(--skw-accent); }

.theme-new .pdx-pill {
  border-color: var(--skw-border-strong);
  color: var(--skw-text);
  border-radius: var(--skw-radius);
}
.theme-new .pdx-pill:hover { background: var(--skw-surface-2); }
.theme-new .pdx-pill.active {
  background: var(--skw-accent);
  border-color: var(--skw-accent);
  color: var(--skw-surface);
}

.theme-new .pdx-tile { background: var(--skw-surface-2); border-radius: var(--skw-radius-sm); }
.theme-new .pdx-tile-img { background: var(--skw-surface); }
.theme-new .pdx-tile-name { color: var(--skw-text); }
.theme-new .pdx-check { color: var(--skw-accent); background: var(--skw-surface); }

.theme-new .pdx-typ {
  background: var(--skw-surface-2);
  color: var(--skw-text);
  border-radius: var(--skw-radius);
}

.theme-new .pdx-back,
.theme-new .pdx-nav-link { color: var(--skw-text-muted); }
.theme-new .pdx-back:hover,
.theme-new .pdx-nav-link:hover { color: var(--skw-text); }

/* =========================================
   Karten-Detail-Modal (Klick auf Kachel)
   ========================================= */

.pdx-card-click { cursor: pointer; }

/* Vor/Zurueck-Pfeile in der Modal-Kopfleiste */
.pdx-nav-btn {
  width: 32px; height: 32px; flex: 0 0 auto;
  border-radius: 8px;
  border: 1px solid var(--bs-border-color);
  background: transparent;
  color: var(--bs-body-color);
  font-size: 22px; line-height: 1; font-weight: 300;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.pdx-nav-btn + .pdx-nav-btn { margin-left: 4px; }
.pdx-nav-btn:hover:not(:disabled) {
  background: var(--bs-secondary-bg);
  border-color: var(--bs-primary);
  color: var(--bs-primary);
}
.pdx-nav-btn:disabled { opacity: 0.3; cursor: default; }
/* Gemerkt-Zustand des Watchlist-Bookmarks im Kopf (wie im Sets-Detail, CI-Indigo) */
#pdxDetailModal .skw-icon-btn.skw-merken-btn.on {
  color: var(--skw-accent, #6366f1);
  border-color: var(--skw-accent, #6366f1);
}

/* Karten-Bild exakt wie im Sets-Detail-Modal (.skw-detail-card-img): 80% Breite,
   zentriert, transparente Box, Karten-Rundung + Schatten. Norman 12.07.2026. */
.pdx-detail-img {
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.pdx-detail-img img {
  width: 80%;
  height: auto;
  border-radius: 5% / 3.6%;
  image-rendering: -webkit-optimize-contrast;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
/* Kartengroesse einheitlich zu Sammlung + Karte-hinzufuegen (Norman 29.09.2026):
   die gemeinsame Infocard rendert .skw-detail-card-img mit width:80% und ohne
   Hoehen-Deckel — im breiten Pokedex-Fenster wurde die Karte dadurch deutlich
   groesser als in den beiden anderen Detail-Fenstern. */
#pdxDetailModal .skw-detail-card-img img {
  width: auto;
  max-width: 100%;
  max-height: 420px;
}

/* Fensterbreite wie das Sammlung-Detail (Norman 29.09.2026): in der 1000px-
   Huelle brach die Reihe der fuenf Grading-Logos links um. Gilt nur hier, das
   Sets-Detail behaelt seine gemeinsame .skw-detail-modal-wrap-Breite. */
#pdxDetailModal .modal-dialog {
  max-width: 1200px;
}

/* Kauf-Block im Detail-Fenster — gleiche Optik wie "KAUF HINZUFUEGEN" im
   Sammlung-Detail-Modal (gestrichelter Rahmen, gleiche Beschriftung). */
.pdx-kauf {
  border: 1px dashed var(--bs-border-color);
  border-radius: 8px;
  padding: 1rem;
}
.pdx-kauf-titel {
  color: var(--bs-secondary-color);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}

.pdx-detail-noimg {
  display: flex; align-items: center; justify-content: center;
  height: 340px; color: var(--bs-secondary-color); font-size: 0.9rem;
}

.pdx-detail-rarity {
  display: inline-block;
  border-radius: 8px;
  padding: 3px 10px;
  font-size: 0.76rem; font-weight: 600;
  background: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}

.pdx-detail-dl { font-size: 0.88rem; margin-bottom: 0; }
.pdx-detail-dl dt { font-weight: 500; color: var(--bs-secondary-color); }
.pdx-detail-dl dd { margin-bottom: 4px; }

.pdx-detail-owned {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--bs-border-color);
  border-radius: 10px;
  background: var(--bs-body-bg);
}
.pdx-detail-owned-label { font-size: 0.86rem; font-weight: 600; }
.pdx-detail-owned-ctrl { display: inline-flex; align-items: center; gap: 10px; }
.pdx-detail-owned-count { font-variant-numeric: tabular-nums; min-width: 32px; text-align: center; font-weight: 600; }

.pdx-detail-chart-title {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em;
  font-weight: 700; color: var(--bs-secondary-color);
}

/* ---- Schicht 2: CI 2026 ---- */
.theme-new .pdx-nav-btn { border-color: var(--skw-border-strong); color: var(--skw-text); }
.theme-new .pdx-nav-btn:hover:not(:disabled) { background: var(--skw-surface-2); border-color: var(--skw-accent); color: var(--skw-accent); }
.theme-new .pdx-detail-rarity { background: var(--skw-surface-2); color: var(--skw-text); border-radius: var(--skw-radius); }
.theme-new .pdx-detail-dl dt { color: var(--skw-text-muted); }
.theme-new .pdx-detail-owned { border-color: var(--skw-border); background: var(--skw-surface); border-radius: var(--skw-radius); }
.theme-new .pdx-detail-owned-label { color: var(--skw-text); }
.theme-new .pdx-detail-chart-title { color: var(--skw-text-soft); }

/* Varianten-Pillen und Varianten-Umschalter auf der Pokedex-Detailseite
   (29.09.2026). Die Pillen selbst sind .sh-vpill von oben - dieselbe
   Bildsprache wie auf der geteilten Set-Seite und im Set-Fenster; hier kommt
   nur die Einpassung in die Karten-Kachel dazu. */
.pdx-tile-vpills { justify-content: flex-start; margin-top: 4px; }
.pdx-split-label {
  font-size: 0.66rem;
  font-weight: 600;
  text-align: center;
  padding: 2px 4px 4px;
  color: var(--skw-text-soft, var(--skw-text));
  letter-spacing: 0.02em;
}
/* Im Varianten-Modus ist die Sammel-Kachel ausgeblendet, ihre Drucke stehen
   an ihrer Stelle. */
.pdx-tile.pdx-split-quelle { display: none; }