/*
 * Nur NPC-Generator-spezifisches Layout. Farben/Typografie/Buttons/Karten/
 * Tags/Pills kommen aus public/css/wmg-shared.css (siehe .wmg-app-Klasse auf
 * dem Root-Container), damit sie nicht pro Generator dupliziert werden.
 *
 * Bewusst NICHT uebernommen aus dem urspruenglichen Entwurf: eine eigene
 * "--wm-magenta"-Hoverfarbe fuer den Re-Roll-Button. Das WordPress-Theme
 * dieser Seite erzwingt sonst ohnehin ein eigenes Magenta auf Buttons/aktive
 * Zustaende, was schon einmal zu schlecht lesbaren Farbkombinationen gefuehrt
 * hat (siehe wmg-shared.css) - der Re-Roll-Button nutzt daher denselben
 * neutralen .wm-btn-Hoverstil wie bei Fallen-/Geruechte-/Loot-Generator.
 */
.wm-npc-app, .wm-npc-shell, .wm-npc-controls, .wm-npc-card { overflow: visible !important; }

.wm-npc-shell{
  display:grid;
  grid-template-columns: minmax(320px, 380px) 1fr;
  gap: 18px;
  align-items:start;
}
@media (max-width: 980px){
  .wm-npc-shell{ grid-template-columns: 1fr; }
  .wm-npc-output{ position:relative !important; top:auto !important; }
}

.wm-npc-controls{ display:flex; flex-direction:column; gap: 14px; min-width:0; }
.wm-npc-brand{ padding: 0 2px; }
.wm-npc-title{ font-size: 20px; font-weight: 700; letter-spacing: .2px; }
.wm-npc-sub{ font-size: 12.5px; color: var(--wm-muted2); margin-top: 2px; }

.wm-npc-card,
.wm-npc-output{
  background: var(--wm-surface);
  border: 1px solid var(--wm-divider);
  box-shadow: none;
  border-radius: var(--wm-radius);
}

.wm-npc-card{ padding: 14px; background: var(--wm-surface-2); }
.wm-npc-mini{ padding: 12px 14px; }

.wm-npc-card-h{
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .35px;
  color: var(--wm-ink);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.wm-npc-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 700px){ .wm-npc-grid{ grid-template-columns: 1fr; } }

.wm-npc-field{ display:flex; flex-direction:column; gap: 6px; min-width:0; }
/* Das Geschlechts-Feld spannt beide Grid-Spalten, damit die drei Pills
   (Male/Female/Random) in EINER Reihe liegen. In einer halben Spalte (~170px)
   passen sie nicht nebeneinander und stapeln sich sonst untereinander, was die
   Zeile gegenueber dem kurzen Dropdown daneben schief aussehen laesst. */
.wm-npc-field-wide{ grid-column: 1 / -1; }
.wm-npc-label{ font-size: 12px; color: var(--wm-muted2); font-weight: 700; }

.wm-npc-select{
  width:100%;
  padding: 10px 10px;
  border-radius: 4px;
  border: 1px solid var(--wm-divider);
  background: var(--wm-surface);
  color: var(--wm-text);
  outline: none;
  font-family: inherit;
}
.wm-npc-select:focus{ box-shadow: 0 0 0 3px var(--wm-teal-tint); border-color: var(--wm-teal); }

.wm-npc-pills{ display:flex; gap: 10px; flex-wrap:wrap; width: 100%; }
.wm-npc-pills .wm-pill{ flex: 1 1 90px; min-width: 90px; }

.wm-npc-row{
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  margin: 12px 0 10px;
}

.wm-npc-actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
@media (max-width: 560px){ .wm-npc-actions{ grid-template-columns: 1fr; } }

.wm-npc-mini-text{ font-size: 12.5px; color: var(--wm-muted2); line-height: 1.45; }

.wm-npc-output{ position: sticky; top: 14px; min-width:0; }
.wm-npc-output-head{ padding: 16px 16px 12px; border-bottom: 2px solid var(--wm-teal); }

.wm-npc-out-title{ display:flex; align-items:center; gap: 10px; }
.wm-npc-dot{
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--wm-teal);
  flex: 0 0 auto;
}
#wmNpcOutName{ font-size: 20px; margin: 0; font-weight: 700; letter-spacing: .2px; }

.wm-npc-tags{ display:flex; gap: 8px; flex-wrap:wrap; margin-top: 10px; }

.wm-npc-meta{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}
@media (max-width: 480px){ .wm-npc-meta{ grid-template-columns: 1fr; } }

.wm-npc-cards{
  padding: 14px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 760px){ .wm-npc-cards{ grid-template-columns: 1fr; } }

.wm-kv{ display:flex; flex-direction:column; gap: 8px; }
.wm-kv-row{
  background: var(--wm-panel);
  border: 1px solid var(--wm-divider);
  border-radius: 6px;
  padding: 8px 10px;
  display:flex;
  justify-content:space-between;
  gap: 12px;
}
.wm-kv-k{ font-size: 11px; color: var(--wm-muted2); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.wm-kv-v{ font-size: 12.5px; color: var(--wm-ink); font-weight: 700; text-align: right; }

/* "Include Name" ist ein reiner CSS-Sichtbarkeits-Schalter auf die bereits
   gerenderte (uebersetzte) Zeile - es wird nie Text per JS neu geschrieben. */
.wm-npc-name-row.is-hidden{ display: none; }

/* "Include Extras" blendet zwischen der echten Liste und einem festen
   Hinweistext um, beides bereits serverseitig gerendert. */
.wm-card-extras .wm-extras-disabled-msg{ display: none; }
.wm-card-extras.is-disabled{ opacity: .75; }
.wm-card-extras.is-disabled .wm-extras-list{ display: none; }
.wm-card-extras.is-disabled .wm-extras-disabled-msg{ display: block; margin: 0; }

.wm-npc-bottom{
  padding: 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}
.wm-npc-actions2{ display:flex; gap: 10px; flex-wrap:wrap; }
@media (max-width: 560px){
  .wm-npc-actions2{ width:100%; }
  .wm-npc-actions2 .wm-btn{ flex: 1 1 auto; }
}

.wm-npc-status{ font-size: 12px; font-weight: 700; color: var(--wm-muted2); }