/*
 * Bestiary-Liste im Akkordeon-Stil (D&D-Beyond-artig, aber im Waldemaster-
 * Design): je Monster eine Zeile mit Bild, CR, Name/Quelle, Typ, Groesse,
 * Gesinnung, Habitat und Aufklapp-Toggle. Aufgeklappt erscheint der volle
 * Statblock (zweispaltig, Klassen aus monster-detail.css) plus eine Fussleiste
 * mit "View Details Page"-Button und Habitat/Treasure.
 */
.wm-wbst-list{ display: flex; flex-direction: column; gap: 8px; }

/* Kopfzeile ueber der Liste: dieselbe Flex-Struktur/Abstaende wie die Zeilen,
   damit die Beschriftungen exakt ueber den Werten stehen. Sortierbare Spalten
   sind anklickbar (data-sort) und zeigen einen Pfeil. */
.wm-wbst-collabels{
  display: flex; align-items: center; gap: 12px;
  padding: 6px 16px; margin-bottom: 2px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--wm-muted2);
}
.wm-wbst-cl-img{ flex: 0 0 40px; }
.wm-wbst-cl-cr{ flex: 0 0 26px; }
.wm-wbst-cl-name{ flex: 0 0 190px; }
.wm-wbst-cl-col{ flex: 1 1 0; min-width: 0; }
.wm-wbst-cl-toggle{ flex: 0 0 28px; }
.wm-wbst-sortlabel{ cursor: pointer; user-select: none; white-space: nowrap; }
.wm-wbst-sortlabel:hover{ color: var(--wm-teal); }
.wm-wbst-collabels .wm-wbst-arrows{ color: var(--wm-teal); font-size: 10px; }

.wm-wbst-item{
  border: 1px solid var(--wm-divider);
  border-radius: var(--wm-radius);
  background: var(--wm-surface);
  overflow: hidden;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.wm-wbst-item:hover{ box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.wm-wbst-item.is-open{ border-color: var(--wm-teal); box-shadow: 0 1px 6px rgba(12,133,123,.12); }

/* --- Kopf-Zeile --- */
.wm-wbst-ihead{
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; cursor: pointer; user-select: none;
}
.wm-wbst-item.is-open .wm-wbst-ihead{ background: var(--wm-panel); border-bottom: 1px solid var(--wm-divider); }

.wm-wbst-ihead-img{
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 6px; object-fit: cover;
  border: 1px solid var(--wm-divider);
  background: var(--wm-parchment-dark);
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.wm-wbst-ihead-cr{ flex: 0 0 26px; text-align: center; font-size: 17px; font-weight: 700; color: var(--wm-ink); }

/* Feste Namensbreite (nicht wachsen lassen), damit die Spalten dicht am Namen
   sitzen und ueber alle Zeilen buendig ausgerichtet bleiben. */
.wm-wbst-ihead-name{ flex: 0 0 190px; min-width: 190px; overflow: hidden; }
/* Langer Name einzeilig mit … kuerzen (voller Name im title-Tooltip). */
.wm-wbst-ihead-title{
  font-size: 16px; font-weight: 700; color: var(--wm-teal); line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.wm-wbst-ihead-title a{ color: inherit; text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; }
.wm-wbst-ihead-title a:hover{ text-decoration: underline; }
.wm-wbst-ihead-source{ font-size: 11px; color: var(--wm-muted2); margin-top: 1px; }

/* Spalten gleichmaessig ueber die verbleibende Breite verteilen (jede waechst
   zu gleichen Teilen; min-width:0 laesst die Ellipsis-Kuerzung greifen). */
.wm-wbst-ihead-col{ flex: 1 1 0; min-width: 0; overflow: hidden; }
.wm-wbst-ihead-k{ display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--wm-muted2); }
/* Werte einzeilig; zu lange Werte mit … kuerzen (voller Text im title-Tooltip). */
.wm-wbst-ihead-v{
  display: block; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13.5px; font-weight: 700; color: var(--wm-teal);
}
.wm-wbst-ihead-v[title]{ cursor: help; }
.wm-wbst-ihead-v--muted{ color: var(--wm-muted); font-weight: 400; }

.wm-wbst-ihead-toggle{
  flex: 0 0 auto; margin-left: auto;
  width: 28px; height: 28px; border-radius: 999px;
  border: 1px solid var(--wm-teal);
  background: #fff !important; color: var(--wm-teal) !important;
  font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer;
  font-family: inherit; display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.wm-wbst-ihead-toggle:hover{ background: var(--wm-teal) !important; color: #fff !important; }

/* Auf schmalen Viewports Zusatzspalten ausblenden. */
@media (max-width: 860px){
  .wm-wbst-ihead-col--alignment{ display: none; }
  .wm-wbst-collabels{ display: none; }
}
@media (max-width: 680px){
  .wm-wbst-ihead-col--size, .wm-wbst-ihead-col--habitat{ display: none; }
}

/* --- Aufgeklappter Koerper (nur sichtbar, wenn .is-open) --- */
.wm-wbst-item-body,
.wm-wbst-item-foot{ display: none; }
.wm-wbst-item.is-open .wm-wbst-item-body{ display: block; padding: 6px 6px 0; }
.wm-wbst-item.is-open .wm-wbst-item-foot{ display: flex; }
.wm-wbst-item-foot{
  align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 20px; border-top: 1px solid var(--wm-divider); background: var(--wm-panel);
}
.wm-wbst-foot-meta{ font-size: 12.5px; color: var(--wm-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wm-wbst-foot-chip{
  display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; padding: 3px 9px; border-radius: 4px;
  border: 1px solid var(--wm-divider); color: var(--wm-muted);
}
.wm-wbst-foot-source{ margin-left: auto; font-style: italic; color: var(--wm-muted2); font-size: 12px; }
.wm-wbst-foot-view{ text-decoration: none; }