/* WoW Forever - Datenbank-Modul: Ergaenzungen zu components.css/base.css
   fuer Filter-UX, Talentraster, Zonenbaum und Kleinigkeiten, fuer die es
   noch keine Kern-Klasse gibt. Praefix wf- (wie im Kern), CSP-konform:
   keine Inline-Styles, nur diese Datei. */

/* Flavortext (gelb, wie im Client) - Kern-components.css kennt nur
   __stat (weiss) und __effect (gruen), Flavortext braucht eine eigene Farbe. */
.wf-tooltip__flavor {
  color: var(--wf-flavor-yellow, #ffd100);
  font-style: italic;
  margin-top: var(--wf-sp-2);
}

/* Suchfeld auf /datenbank und /suche: schmaler als die Kopfzeilen-Suche. */
.wf-db-search {
  max-width: 32rem;
  margin: 0 0 var(--wf-sp-5);
}

/* Item-/Zauber-Icon in Tabellenzeilen (36px, mit dezentem Rahmen). */
.wf-item-icon {
  border-radius: var(--wf-radius-sm);
  border: 1px solid var(--wf-border);
}

/* Volksfaehigkeiten auf der Rassenseite: Symbol links, Name und Wirkung. */
.wf-racials {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--wf-sp-3);
}
.wf-racials__item {
  display: flex;
  align-items: flex-start;
  gap: var(--wf-sp-3);
}
.wf-racials__item .wf-item-icon { flex: none; }
.wf-racials__text {
  margin: var(--wf-sp-1) 0 0;
  color: var(--wf-text-dim);
  font-size: var(--wf-fs-200);
}
.wf-racials__varianten {
  margin: 0;
  padding-left: var(--wf-sp-4);
}

/* Checkbox-Zeile in Filterleisten (Qualitaet, "nur passiv" usw.) - ersetzt
   Inline-Styles, die wegen der CSP nicht erlaubt sind. */
.wf-checkline {
  display: flex;
  align-items: center;
  gap: var(--wf-sp-2);
  font-weight: 400;
  text-transform: none;
  min-height: 44px;
  cursor: pointer;
}

.wf-filterfield fieldset.wf-filterfield,
fieldset.wf-filterfield {
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-md);
  padding: var(--wf-sp-2) var(--wf-sp-3);
  min-width: 0;
}

fieldset.wf-filterfield legend {
  font-size: var(--wf-fs-100);
  color: var(--wf-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0 var(--wf-sp-1);
}

/* /items-Filter in klaren Zeilen: (1) Suche, Slot, Ausruestungsklasse,
   nutzbar fuer; (2) die beiden Stufenbereiche und die Qualitaet als
   waagrechte Reihe; Knopf rechts. Vorher standen acht Qualitaeten
   untereinander in einer schmalen Spalte (das Formular wurde 500px hoch),
   und "Gegenstandsstufe von" brach als "GEGENSTA / NDSSTUFE" um. */
.wf-rangefield { border: 0; margin: 0; padding: 0; min-width: 0; }

.wf-rangefield legend {
  padding: 0;
  margin-bottom: var(--wf-sp-1);
  font-size: var(--wf-fs-100);
  color: var(--wf-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.wf-rangefield__inputs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wf-sp-2); }
.wf-rangefield__inputs label { text-transform: none; letter-spacing: 0; }

/* .wf-filterfield ist eine Spalten-Flexbox - fuer die Qualitaeten als
   umbrechende Reihe drehen. */
.wf-qualityfield { flex-direction: row; flex-wrap: wrap; column-gap: var(--wf-sp-4); row-gap: 0; }

@media (min-width: 640px) {
  .wf-filterbar__grid--items .wf-qualityfield { grid-column: 1 / -1; }
}

@media (min-width: 960px) {
  .wf-filterbar__grid--items { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
  .wf-filterbar__grid--items .wf-qualityfield { grid-column: 3 / 5; }
  .wf-filterbar__grid--items > .wf-btn { grid-column: 4; }
}

/* Set-/Zauber-Liste ohne Aufzaehlungspunkte, wie die Nav-Listen im Kern. */
.wf-setlist,
.wf-zone-tree {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wf-zone-tree > li {
  padding: var(--wf-sp-2) 0;
  border-bottom: 1px solid var(--wf-border);
}

.wf-zone-tree ul {
  list-style: none;
  margin: var(--wf-sp-2) 0 0 var(--wf-sp-5);
  padding: 0;
}

.wf-zone-tree ul li {
  padding: var(--wf-sp-1) 0;
}

/* Talent-Tabs + 4x7-Raster (Datenansicht, kein Rechner). */
.wf-talent-tabbtn { background: none; }

/* Eigener Scrollbereich fuer das Raster: die 4 Spalten brauchen bei langen
   Talentnamen mehr als die verfuegbare Breite bei 375px (gemessen:
   /talente/jaeger, /talente/magier). Fokussierbare Kinder (Talent-Icons)
   sind bereits vorhanden, deshalb kein zusaetzliches tabindex/role/aria-label
   noetig (Vertrag Abschnitt 12). contain: layout haelt das Raster aus der
   Scrollbreite des Dokuments heraus, wie bei .wf-table-wrap. */
.wf-talent-panel { overflow-x: auto; contain: layout; }

.wf-talent-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wf-sp-3);
  max-width: 320px;
  margin-bottom: var(--wf-sp-6);
}

/* Kein aspect-ratio mehr: seit die Zelle den Talentnamen traegt, bestimmt
   der Text die Hoehe. min-height haelt die leeren Plaetze im Raster auf
   derselben Groesse wie die belegten. */
.wf-talent-cell {
  min-height: 104px;
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid var(--wf-border);
  border-radius: var(--wf-radius-sm);
  background: var(--wf-bg-card);
}

.wf-talent-icon img {
  width: 36px;
  height: 36px;
  border-radius: var(--wf-radius-sm);
}

/* Die Talentnamen sind englisch und teils lang; drei Zeilen reichen fuer
   "Improved Entangling Roots", danach wird abgeschnitten - der Tooltip
   zeigt den vollen Namen. */
.wf-talent-name {
  font-size: var(--wf-fs-100);
  line-height: 1.15;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

.wf-talent-rank {
  font-size: var(--wf-fs-100);
  color: var(--wf-text-dim);
}

/* Item-Icon-Tabellenzelle im Layout-2col (Item-Set-Detailseite). */
.wf-layout-2col aside .wf-card h2 { margin-top: 0; }

/* Kurzinfo (Item, Zauber): Schluessel/Wert-Zeilen. Als nackte <p> mit
   Standardabstand standen vier Zeilen ueber 300px hoch auseinander und
   lasen sich nicht als Liste; jetzt eng, mit Trennlinie, Schluessel in der
   Nebenfarbe. */
.wf-layout-2col aside .wf-card > .wf-tooltip__line {
  margin: 0;
  padding: var(--wf-sp-2) 0;
  border-bottom: 1px solid var(--wf-border);
}
.wf-layout-2col aside .wf-card > .wf-tooltip__line > span:first-child { color: var(--wf-text-dim); }
.wf-layout-2col aside .wf-card > .wf-tooltip__line > span:last-child { text-align: right; overflow-wrap: anywhere; }

/* ============ Klassen-Schnellfilter (/items) ============
   Zaehler je Gegenstandsklasse als Links auf den bestehenden
   Unterklassen-Filter (?unterklasse=<class_id>), rein per GET, kein JS
   noetig. Der aktive Filter ist zusaetzlich zur Farbe an der duennen
   Unterstreichung und am fetten Zahlwert erkennbar. */
.wf-classbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wf-sp-2);
  margin-bottom: var(--wf-sp-4);
}

.wf-classbar__link {
  display: inline-flex;
  align-items: center;
  gap: var(--wf-sp-1);
  min-height: 44px;
  padding: var(--wf-sp-1) var(--wf-sp-3);
  border: 1px solid var(--wf-gold-edge);
  border-radius: 999px;
  color: var(--wf-text);
  font-size: var(--wf-fs-200);
  text-decoration: none;
}

.wf-classbar__link:hover,
.wf-classbar__link:focus-visible {
  border-color: var(--wf-accent);
  color: var(--wf-heading);
}

.wf-classbar__link--aktiv {
  border-color: var(--wf-accent-gold);
  border-bottom-width: 3px;
  color: var(--wf-gold-bright);
}

.wf-classbar__zahl { font-weight: 700; }
.wf-classbar__link--aktiv .wf-classbar__zahl { text-decoration: underline; }

/* ============ "Link kopieren" (Item-/Zauberdetailseite) ============
   Logik wie beim Teilen im Talentrechner (wf-tc-share in rechner.css): das
   Eingabefeld zeigt den Link immer und ist der Ersatzweg ohne
   JavaScript (Text markieren, selbst kopieren); der Knopf bleibt bis zur
   Aktivierung durch assets/js/database.js versteckt. */
.wf-copylink {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wf-sp-2);
  margin-top: var(--wf-sp-3);
  font-size: var(--wf-fs-200);
}

.wf-copylink input {
  flex: 1 1 12rem;
  min-width: 0;
  padding: var(--wf-sp-2) var(--wf-sp-3);
  border: 1px solid var(--wf-control-border);
  border-radius: var(--wf-radius-md);
  background: var(--wf-control-bg);
  color: var(--wf-text);
  font-size: var(--wf-fs-300);
}

.wf-copylink__status { color: var(--wf-quality-uncommon); }

/* Treffergruppen auf /suche: je Typ ein Abschnitt, aber nicht mit dem
   2rem-Innenabstand ganzer Seitenabschnitte (zwischen zwei kurzen Listen
   standen 100px Luft). */
.wf-suchgruppe { margin-top: var(--wf-sp-6); }
.wf-suchgruppe h2 { font-size: var(--wf-fs-500); margin-bottom: var(--wf-sp-2); }
.wf-suchgruppe ul { margin: 0; padding-left: var(--wf-sp-5); }
.wf-suchgruppe li + li { margin-top: var(--wf-sp-1); }