/*
 * Magic-Items-Liste im Akkordeon-Stil (wie Bestiary/Spells, im Waldemaster-
 * Design). Kategorie-Icon-Strip + Filterleiste + sortierbare Kopfzeile + je
 * Gegenstand eine aufklappbare Zeile (Untertitel + Gold-Linie + Beschreibung +
 * Notes + Fussleiste). Praefix wm-wmi-, Wurzel #wmiApp. Bausteine aus
 * wsc-shared.css. Standalone-Detailseite am Dateiende.
 */
.wm-wmi-app{ margin: 0 auto; max-width: var(--wsc-content-width, 1200px); }

/* Zweisprachige Detailseite: DE-Block zunaechst versteckt, Sprachumschalter rechtsbuendig. */
.wsc-lang-de{ display: none; }
.wsc-detail-langbar{ max-width: var(--wsc-detail-width, 1000px); margin: 0 auto 10px; display: flex; justify-content: flex-end; }
.wm-wmi-subrow{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.wm-wmi-sub{ font-size: 12.5px; color: var(--wm-muted); max-width: 680px; }
.wm-wmi-count{ font-size: 12px; font-weight: 700; color: var(--wm-teal); white-space: nowrap; }

/* --- Kategorie-Icon-Strip (Typ-Filter) - gefuelltes Band im Bestiary-Stil --- */
.wm-wmi-cats{ display:flex; align-items:flex-start; justify-content:space-between; gap:4px; background:var(--wm-gold-tint); border:1px solid var(--wm-divider); border-radius:var(--wm-radius); padding:12px 10px 8px; margin-bottom:16px; }
/* !important: das Site-Theme zwingt Buttons in Hover-/Aktivzustaenden auf Magenta. */
.wm-wmi-cat,
.wm-wmi-cat:hover,
.wm-wmi-cat:focus,
.wm-wmi-cat:active,
.wm-wmi-cat.is-active{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:6px; border:none !important; background:transparent !important; box-shadow:none !important; cursor:pointer; font-family:inherit; padding:2px; outline:none; }
.wm-wmi-cat-ic{ width:70px; height:70px; box-sizing:border-box; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:32px; border:2px solid transparent; background:var(--wm-parchment-dark) !important; color:var(--wm-ink) !important; box-shadow:0 1px 3px rgba(38,36,33,.15); overflow:hidden; transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease; }
.wm-wmi-cat-ic img{ width:100%; height:100%; object-fit:cover; }
.wm-wmi-cat-lbl{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--wm-muted) !important; text-align:center; line-height:1.2; }
.wm-wmi-cat:hover .wm-wmi-cat-ic{ transform:translateY(-2px); border-color:var(--wm-teal); color:var(--wm-ink) !important; }
.wm-wmi-cat:hover .wm-wmi-cat-lbl{ color:var(--wm-muted) !important; }
.wm-wmi-cat.is-active .wm-wmi-cat-ic{ border-color:var(--wm-teal); box-shadow:0 0 0 3px var(--wm-teal-tint) !important; }
.wm-wmi-cat.is-active .wm-wmi-cat-lbl{ color:var(--wm-teal) !important; }

/* Pastellfarben je Kategorie (wie die Typkreise im Bestiary) */
.wm-wmi-cat[data-type=""] .wm-wmi-cat-ic{ background:var(--wm-teal-tint) !important; }
.wm-wmi-cat[data-type="armor"] .wm-wmi-cat-ic{ background:#dbe0e7 !important; }
.wm-wmi-cat[data-type="potion"] .wm-wmi-cat-ic{ background:#dfe9d3 !important; }
.wm-wmi-cat[data-type="ring"] .wm-wmi-cat-ic{ background:#f7edca !important; }
.wm-wmi-cat[data-type="rod"] .wm-wmi-cat-ic{ background:#d2e6eb !important; }
.wm-wmi-cat[data-type="scroll"] .wm-wmi-cat-ic{ background:#f2e8d5 !important; }
.wm-wmi-cat[data-type="staff"] .wm-wmi-cat-ic{ background:#e7d9ef !important; }
.wm-wmi-cat[data-type="wand"] .wm-wmi-cat-ic{ background:#f8dbe7 !important; }
.wm-wmi-cat[data-type="weapon"] .wm-wmi-cat-ic{ background:#f2d7d1 !important; }
.wm-wmi-cat[data-type="wondrous-item"] .wm-wmi-cat-ic{ background:#dfd8e0 !important; }

/* Auf schmalen Viewports horizontal scrollen statt quetschen */
@media (max-width: 780px){
  .wm-wmi-cats{ overflow-x:auto; justify-content:flex-start; }
  .wm-wmi-cat{ flex:0 0 74px; }
  .wm-wmi-cat-ic{ width:56px; height:56px; font-size:26px; }
}

/* --- Filterleiste --- */
.wm-wmi-filters{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px; background:var(--wm-surface); border:1px solid var(--wm-divider); border-radius:var(--wm-radius); padding:12px 14px; margin-bottom:12px; }
.wm-wmi-field{ display:flex; flex-direction:column; gap:4px; }
.wm-wmi-field-grow{ flex:1 1 200px; }
.wm-wmi-flabel{ font-size:10.5px; font-weight:700; color:var(--wm-muted2); text-transform:uppercase; letter-spacing:.05em; }
.wm-wmi-search, .wm-wmi-select{ border:1px solid var(--wm-divider); border-radius:4px; padding:9px 10px; font-family:inherit; font-size:13px; color:var(--wm-ink); background:#fff; }
.wm-wmi-search{ width:100%; box-sizing:border-box; }
.wm-wmi-select{ min-width:120px; }
.wm-wmi-search:focus, .wm-wmi-select:focus{ outline:none; border-color:var(--wm-teal); box-shadow:0 0 0 3px var(--wm-teal-tint); }
.wm-wmi-toggles{ display:inline-flex; align-items:center; gap:12px; min-height:37px; }
.wm-wmi-check{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700; color:var(--wm-muted); cursor:pointer; user-select:none; }
.wm-wmi-check input{ accent-color:var(--wm-teal); }
.wm-wmi-field-btns{ flex-direction:row; align-items:center; gap:12px; margin-left:auto; }
/* Magiebonus-Toggles (+1/+2/+3) - !important gegen das Theme-Magenta */
.wm-wmi-bonusbtn,
.wm-wmi-bonusbtn:hover,
.wm-wmi-bonusbtn:focus,
.wm-wmi-bonusbtn:active{
  border:1px solid var(--wm-divider) !important;
  background:#fff !important;
  color:var(--wm-ink) !important;
  border-radius:4px;
  min-width:37px;
  height:37px;
  padding:0 8px;
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:none !important;
  outline:none;
}
.wm-wmi-bonusbtn:hover{ border-color:var(--wm-teal) !important; }
.wm-wmi-bonusbtn.is-on,
.wm-wmi-bonusbtn.is-on:hover,
.wm-wmi-bonusbtn.is-on:focus,
.wm-wmi-bonusbtn.is-on:active{
  background:var(--wm-teal) !important;
  border-color:var(--wm-teal) !important;
  color:#fff !important;
}
.wm-wmi-reset{ border:none; background:transparent !important; color:var(--wm-teal) !important; font-family:inherit; font-size:12px; font-weight:700; cursor:pointer; text-decoration:underline; padding:0; }

/* --- Kopfzeile (an die Spalten der Zeilen ausgerichtet) --- */
.wm-wmi-collabels{ display:flex; align-items:center; gap:12px; padding:6px 17px; margin-bottom:2px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--wm-muted2); }
.wm-wmi-sortlabel{ cursor:pointer; user-select:none; white-space:nowrap; }
.wm-wmi-sortlabel:hover{ color:var(--wm-teal); }
.wm-wmi-collabels .wm-wmi-arrows{ color:var(--wm-teal); font-size:10px; }

/* Spaltenbreiten - Kopf und Zeilen identisch. Name fest, Datenspalten gleich. */
.wm-wmi-c-icon{ flex:0 0 40px; }
.wm-wmi-c-name{ flex:0 0 220px; }
.wm-wmi-c-col{ flex:1 1 0; min-width:0; }
.wm-wmi-c-notes{ flex:1.6 1 0; min-width:0; }
.wm-wmi-c-toggle{ flex:0 0 28px; }

/* --- Liste + Zeilen --- */
.wm-wmi-list{ display:flex; flex-direction:column; gap:8px; }
.wm-wmi-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-wmi-item:hover{ box-shadow:0 1px 4px rgba(0,0,0,.06); }
.wm-wmi-item.is-open{ border-color:var(--wm-teal); box-shadow:0 1px 6px rgba(12,133,123,.12); }

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

.wm-wmi-icon{ width:40px; height:40px; flex:0 0 40px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:20px; border:1px solid var(--wm-divider); background:var(--wm-parchment-dark); }
.wm-wmi-icon--img{ background:transparent; padding:0; overflow:hidden; }

.wm-wmi-name{ flex:0 0 220px; overflow:hidden; }
.wm-wmi-name-title{ font-size:15px; font-weight:700; color:var(--wm-teal); line-height:1.15; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wm-wmi-name-title a{ color:inherit; text-decoration:none; display:block; overflow:hidden; text-overflow:ellipsis; }
.wm-wmi-name-title a:hover{ text-decoration:underline; }
.wm-wmi-name-sub{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--wm-muted2); }

/* Seltenheits-Farben (dezent, Waldemaster-vertraeglich) */
.wm-wmi-rar--common{ color:#6b6558; }
.wm-wmi-rar--uncommon{ color:#2e8b57; }
.wm-wmi-rar--rare{ color:#2f6fb0; }
.wm-wmi-rar--very-rare{ color:#8a4fbf; }
.wm-wmi-rar--legendary{ color:#c0872a; }
.wm-wmi-rar--artifact{ color:#a4553a; }
.wm-wmi-rar--varies{ color:var(--wm-muted2); }

.wm-wmi-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-wmi-v[title]{ cursor:help; }
.wm-wmi-v--muted{ color:var(--wm-muted); font-weight:400; }

.wm-wmi-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-wmi-toggle:hover{ background:var(--wm-teal) !important; color:#fff !important; }

/* Responsive: enge Spalten zuerst ausblenden */
@media (max-width: 1040px){ .wm-wmi-c-notes, .wm-wmi-col--notes{ display:none; } }
@media (max-width: 820px){ .wm-wmi-c-attunement, .wm-wmi-col--attunement{ display:none; } .wm-wmi-collabels{ display:none; } }

/* --- Aufgeklappt --- */
.wm-wmi-body, .wm-wmi-foot{ display:none; }
.wm-wmi-item.is-open .wm-wmi-body{ display:block; padding:20px 26px 10px; }
.wm-wmi-item.is-open .wm-wmi-foot{ display:flex; }

.wm-wmi-subtitle{ font-family:Georgia, serif; font-style:italic; font-size:14px; color:var(--wm-muted); margin-bottom:2px; }
.wm-wmi-rule{ border:0; border-top:2px solid var(--wm-gold) !important; margin:14px 0 12px !important; height:0; background:transparent !important; }

/* Beschreibungstext override-fest gegen Theme/Elementor-Regeln (!important
   schlaegt normale Fremdregeln unabhaengig von der Spezifitaet). */
.wm-wmi-desc{ font-size:15px !important; color:var(--wm-text) !important; }
.wm-wmi-desc p{ margin:0 0 14px !important; padding:0 !important; line-height:1.62 !important; font-size:15px !important; }
.wm-wmi-desc p:last-child{ margin-bottom:0 !important; }
.wm-wmi-desc em{ font-style:italic !important; font-weight:700 !important; color:var(--wm-ink) !important; }
.wm-wmi-desc strong{ color:var(--wm-ink) !important; }
.wm-wmi-notes{ font-style:italic; font-size:12.5px; color:var(--wm-muted); margin-top:14px; }
.wm-wmi-notes strong{ font-style:normal; color:var(--wm-ink); }

.wm-wmi-foot{ align-items:center; gap:14px; flex-wrap:wrap; padding:12px 20px; border-top:1px solid var(--wm-divider); background:var(--wm-panel); }
.wm-wmi-foot-view{ text-decoration:none; }
.wm-wmi-foot-tags{ display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12px; color:var(--wm-muted); }
.wm-wmi-classchip{ display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:3px 9px; border-radius:4px; border:1px solid var(--wm-divider); color:var(--wm-muted); }
.wm-wmi-foot-source{ margin-left:auto; font-style:italic; color:var(--wm-muted2); font-size:12px; }

/* --- Pager --- */
.wm-wmi-pager{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:5px; margin-top:12px; }
.wm-wmi-pager:empty{ display:none; }
.wm-wmi-pagebtn{ border:1px solid var(--wm-divider); background:#fff !important; color:var(--wm-teal) !important; border-radius:4px; padding:7px 12px; font-family:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.wm-wmi-pagebtn.active{ background:var(--wm-teal) !important; color:var(--wm-on-teal) !important; border-color:var(--wm-teal); cursor:default; }
.wm-wmi-pagebtn:disabled{ opacity:.45; cursor:not-allowed; }
.wm-wmi-pagegap{ color:var(--wm-muted2); font-weight:700; padding:0 2px; }
.wm-wmi-nores{ padding:40px 20px; text-align:center; color:var(--wm-muted2); font-size:13.5px; }

/* --- Standalone-Detailseite (CPT wsc_magic_item single) --- */
.wm-wmi-detail{ max-width:var(--wsc-detail-width, 1000px); margin:0 auto; border:1px solid var(--wm-divider); border-radius:var(--wm-radius); background:var(--wm-surface); overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.wm-wmi-detail-head{ padding:16px 20px 10px; }
.wm-wmi-detail-title{ font-family:Georgia, serif; font-variant:small-caps; font-size:26px; font-weight:700; color:var(--wm-ink); border-bottom:2px solid var(--wm-gold); padding-bottom:6px; }

.wm-wmi-detail-body{ display:flex; gap:24px; padding:16px 20px 6px; align-items:flex-start; }
@media (max-width:720px){ .wm-wmi-detail-body{ flex-direction:column; } }
.wm-wmi-detail-main{ flex:1 1 auto; min-width:0; }
.wm-wmi-detail-main .wm-wmi-subtitle{ margin-bottom:2px; }
/* Quadratisches Art-Panel; Bild wird komplett gezeigt (nicht beschnitten). */
.wm-wmi-detail-art{ flex:0 0 340px; aspect-ratio:1/1; border-radius:8px; display:flex; align-items:center; justify-content:center; border:1px solid var(--wm-divider); overflow:hidden; }
@media (max-width:720px){ .wm-wmi-detail-art{ flex-basis:auto; width:100%; max-width:360px; margin:0 auto; } }
.wm-wmi-detail-glyph{ font-size:130px; line-height:1; filter:drop-shadow(0 2px 5px rgba(0,0,0,.15)); }
.wm-wmi-detail-img{ width:100%; height:100%; object-fit:contain; border-radius:8px; display:block; }
/* Detailtext groesser (15px statt 13.5). */
.wm-wmi-detail .wm-wmi-desc p{ font-size:15px !important; line-height:1.6 !important; }
.wm-wmi-detail-tags{ display:flex; align-items:flex-start; gap:8px; flex-wrap:wrap; padding:6px 20px; font-size:12px; color:var(--wm-muted); }
.wm-wmi-detail-tags strong{ padding-top:3px; white-space:nowrap; }
.wm-wmi-detail-source{ text-align:right; font-style:italic; color:var(--wm-muted2); font-size:12px; padding:8px 20px 16px; }
.wm-wmi-back{ display:block; text-align:center; margin:16px auto 0; }

/* Applicable-Armor/Weapon-Referenztabelle auf der Detailseite (falls vorhanden) */
.wm-wmi-reftable{ width:100%; border-collapse:collapse; margin:6px 0 12px; font-size:12.5px; }
.wm-wmi-reftable th, .wm-wmi-reftable td{ border:1px solid var(--wm-divider); padding:6px 9px; text-align:left; }
.wm-wmi-reftable th{ background:var(--wm-panel); font-weight:700; color:var(--wm-ink); }