/* === Container & Kategorien ============================================ */
.memrelas{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.memrelas-catcon{
  position:relative;
  padding:16px 16px 12px;
  background: var(--tbl-main-tr);
  border:1px solid var(--hairline);
  box-shadow: var(--shadow-soft);
}

/* Abschnittsüberschrift (H2) als Label-Ribbon wie .item-label */
.rela-heading2{
  position:relative;
  display:inline-block;
  margin:0 0 14px;
  padding:4px 12px;
  font-family: var(--akzenttext);
  font-size: var(--txtm);
  letter-spacing:.3em;
  text-transform:uppercase;
  color: var(--design);
}

/* === Subkategorie ====================================================== */
.memrelas-subcat{
  display:grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap:12px;
}

/* Subcat-Heading (H3) */
.rela-heading3{
  grid-column: 1 / -1;
  margin: 6px 0 4px;
  font-family: var(--akzenttext);
  font-size: var(--txts);
  letter-spacing:.25em;
  text-transform:uppercase;
  color: var(--akzent-hell);
}

/* === Entry Card ======================================================== */
.memrelas-entry{
  background: var(--tbl-main-tr2);
  border:1px solid var(--hairline);
  display:grid;
  grid-template-columns: 56px 1fr;
  grid-template-areas:
    "ava  name"
    "ava  meta"
    "ava  descr";
  gap:8px 12px;
  align-items:start;
  padding:10px;
  min-height:72px;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.memrelas-entry:hover{
  background: var(--tbl-main-tr);
  border-color: color-mix(in srgb, var(--hairline) 60%, var(--design));
  transform: translateY(-1px);
}

/* === Entry: Bereiche =================================================== */
.memrelas-entry__item.ava   { grid-area: ava;   }
.memrelas-entry__item.name  { grid-area: name;  align-self:center; }
.memrelas-entry__item.age,
.memrelas-entry__item.job   { grid-area: meta;  }
.memrelas-entry__item.descr { grid-area: descr; }

/* Avatar-Kreis / Platzhalter */
.avarund{
  width:48px;height:48px;
  border-radius:50%;
  display:grid;place-items:center;
  color: var(--design);
  border:2px solid var(--design);
  overflow:hidden;
}
.avarund .fa-solid{ font-size:22px; }

/* Name — prominent */
.memrelas-entry__item.name{
  font-weight:700;
  font-size: var(--txts);
  letter-spacing:.02em;
  color: var(--akzent-hell);
}

/* Meta-Zeile (Age + Job) als Chips, nur anzeigen wenn Inhalte da sind */
.memrelas-entry__item.age,
.memrelas-entry__item.job{
  display:flex; gap:6px; flex-wrap:wrap;
  margin-top:-2px;
}

.memrelas-entry__item.age:empty,
.memrelas-entry__item.job:empty{
  display:none;
}

/* Optional: Wenn im HTML nur Whitespace steht, fällt :empty raus.
   Dieser Selektor fängt es in modernen Browsern ab. */
.memrelas-entry__item.age:not(:has(*)):empty,
.memrelas-entry__item.job:not(:has(*)):empty{ display:none; }

.memrelas-chip{
  display:inline-block;
  padding:2px 6px;
  background: var(--akzent-red-soft);
  color: var(--tbl-main);
  font-size: var(--txtxxsmall);
  text-transform:uppercase;
  letter-spacing:.15em;
  border:1px solid var(--hairline);
}

/* Beschreibung mit sanfter Clamp (2–3 Zeilen) */
.memrelas-entry__item.descr .entry__item{
  --clamp: 3;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp: var(--clamp);
  overflow:hidden;
  line-height:1.4;
  color: var(--txtcol);
}

/* Für lange Textschnipsel die Typo etwas kleiner */
.memrelas-entry__item.descr{
  font-size: var(--txtxxsmall);
}

/* === Responsive ======================================================== */
@media (max-width:900px){
  .memrelas-subcat{ grid-template-columns: 1fr; }
}
@media (max-width:520px){
  .memrelas-entry{
    grid-template-columns: 44px 1fr;
    gap:6px 10px;
  }
  .avarund{ width:40px;height:40px; }
  .memrelas-entry__item.descr .entry__item{ --clamp: 4; } /* etwas mehr Text auf Mobile */
}

/* === Barrierefreiheit / Fokus ========================================= */
.memrelas-entry:focus-within{
  outline:2px solid var(--design);
  outline-offset:2px;
}

/* === Optional: kleine Utilities ======================================= */
/* Wenn du Age/Job serverseitig als Chip ausgibst: */
.memrelas-entry__item.age > span,
.memrelas-entry__item.job > span{ @apply memrelas-chip; } /* oder kopiere .memrelas-chip */

/* ================== UCP: Relations ================== */

.ucprelas-con{
  display:flex; flex-direction:column; gap:14px;
}

/* Card */
.ucprelas-con__item{
  padding:10px;
}

/* Headings im UCP-Kontext konsistent */
.rela-heading2{
  margin: 4px 0 10px;
  font-family: var(--akzenttext);
  font-size: var(--txts);
  letter-spacing:.25em;
  text-transform: uppercase;
  color: var(--design);
  padding:6px 10px;
  border:1px solid var(--hairline);
}
.rela-heading3{
  margin: 8px 0 8px;
  font-family: var(--akzenttext);
  font-size: var(--txtxxsmall);
  letter-spacing:.2em;
  text-transform: uppercase;
  color: var(--akzent-hell);
}

/* ====== Manage Section ====== */
.ucprelas-manage{
  display:grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap:12px;
  margin-bottom: 6px;
}
.ucprelas-manage__item{
  background: var(--tbl-main-tr2);
  padding:10px;
}

/* 2-spaltige Gruppe (addcats) */
.ucprelas-addcats{
  display:grid; gap:10px;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
}
.ucprelas-addcats__item{
  padding:10px;
}
.ucprelas-addmaincats{ grid-column: 1 / -1; } /* Headline + Form über volle Breite */

/* NPC + add character Spalten nebeneinander */
.ucprelas-addcharas{
  display:grid; gap:10px;
}

/* ====== Form Styles (neutral, dark) ====== */
.ucprelas-con form{
  display:grid; gap:8px;
}
.ucprelas-con label{
  color: var(--akzent-hell);
}
.ucprelas-con input[type="text"],
.ucprelas-con input[type="number"],
.ucprelas-con input[type="url"],
.ucprelas-con select,
.ucprelas-con textarea{
  align-self: stretch;
  padding:8px 10px;
  background: var(--tbl-main-tr);
  border:1px solid var(--hairline);
  color: var(--akzent-hell);
  font: inherit;
}
.ucprelas-con textarea{ min-height: 96px; resize: vertical; }

.ucprelas-con input[type="text"]::placeholder,
.ucprelas-con input[type="number"]::placeholder,
.ucprelas-con input[type="url"]::placeholder,
.ucprelas-con textarea::placeholder{
  color: rgba(255,255,255,.35);
}

.input[type="radio" i] {
width: var(--txtm); !important }

/* Focus */
.ucprelas-con input:focus,
.ucprelas-con select:focus,
.ucprelas-con textarea:focus{
  outline: none;
  border-color: color-mix(in srgb, var(--hairline) 50%, var(--design));
  box-shadow: 0 0 0 2px color-mix(in srgb, transparent 70%, var(--design));
}

/* Submit Buttons */
.ucprelas-con input[type="submit"],
.ucprelas-con button[type="submit"]{
  align-self: start;
  padding:8px 12px;
  background: var(--tbl-main-tr);
  color: var(--akzent-hell);
  border:1px solid var(--hairline);
  text-transform: uppercase;
  letter-spacing:.15em;
  font-size: var(--txtxxsmall);
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.ucprelas-con input[type="submit"]:hover{
  background: var(--tbl-main-tr2);
  color: var(--design);
  border-color: color-mix(in srgb, var(--hairline) 60%, var(--design));
  transform: translateY(-1px);
}

/* Radio/Checkbox Row */
.ucprelas-con .radio-row{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
}

/* ====== Alerts/Confirm Box ====== */
.ucprelas-managecats{
    display: grid;
    gap: 8px;
    align-items: start;
    align-content: center;
}
.ucprelas-managecats p{ margin:0 0 6px; }

/* ====== NPC/Character Forms ====== */
.ucprelas-npcform{
  display:grid; gap:10px;
}
.ucprelas-npcform__item{
  display:flex; flex-direction:column; gap:6px;
}

/* ====== Select2 Minimal-Dark (falls aktiv) ====== */
.select2-container .select2-choice{
  background: var(--tbl-main-tr) !important;
  border:1px solid var(--hairline) !important;
  color: var(--akzent-hell) !important;
}
.select2-drop{
  background: var(--tbl-main) !important;
  border:1px solid var(--hairline) !important;
}
.select2-results li{ color: var(--akzent-hell); }
.select2-search input{
  background: var(--tbl-main-tr) !important;
  color: var(--akzent-hell) !important;
  border:1px solid var(--hairline) !important;
}

/* ====== Requests & „Deine Relations“ ====== */
.ucprelas-request{ display:flex; flex-direction:column; gap:12px; }
.ucprelas-request__item{
  padding:10px;
}

/* Tabs für „Deine Relations“ */
.ucprelas-alltabs{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px;
}
.ucprelas-alltabs .tab{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px;
  color: var(--akzent-hell);
  text-decoration:none; cursor:pointer;
  font-size: var(--txtxsmall);
  letter-spacing:.15em; text-transform:uppercase;
  transition: all .15s ease;
}
.ucprelas-alltabs .tab:hover{ color: var(--design); background: var(--tbl-main-tr); }
.ucprelas-alltabs .tab.is-active{
  border-color: color-mix(in srgb, var(--hairline) 60%, var(--design));
  box-shadow: inset 0 0 0 1px var(--design);
  color: var(--design);
}

/* Empty states */
.ucprelas-empty{
  padding:16px; text-align:center; color: rgba(255,255,255,.55);
  border:1px dashed var(--hairline);
}

/* ====== Responsive ====== */
@media (max-width: 1200px){
  .ucprelas-manage{ grid-template-columns: repeat(2, minmax(260px, 1fr)); }
  .ucprelas-addcharas{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .ucprelas-manage{ grid-template-columns: 1fr; }
  .ucprelas-addcats{ grid-template-columns: 1fr; }
}

/* Kleine Utilities */
.ucprelas-help{ font-size: var(--txtxxsmall); opacity:.7; }
.ucprelas-muted{ opacity:.65; }