/**
 * /HeroX/assets/css/world-common.css
 *
 * Purpose:  Shared styles for all Weltenbau (world-building) UI components
 * Deps:     Bootstrap 5, app.css (base theme)
 * Load:     index.php
 * Components:
 *   - Alignment Grid (3×3 Gesinnung)
 *   - Unified Entity Cards (Völker, Klassen, NPCs, Monster, Lore)
 *   - Reputation Bar (Ruf-Balken)
 *   - GM-Only Box
 *   - Filter Bar (Kategorie-Filter)
 *   - Tag Badges (Traits, Services, Tags)
 *   - Disposition Badge (NPC Haltung)
 *   - Stat Modifier Display
 *   - Accordion Form Sections
 *   - World Card (Welten-Übersicht)
 *   - Loot Table
 *   - Trade Table
 *   - World User Search (Suchpanel fuer Spielleiter/Spieler hinzufuegen)
 * Version:  1.4.0
 */

/* ============================================================
   CSS CUSTOM PROPERTIES (World Theme)
   ============================================================ */
:root {
    /* Alignment colors */
    --align-good:       #28a745;
    --align-good-light: #5cb85c;
    --align-neutral:    #ffc107;
    --align-neutral-dim:#6c757d;
    --align-evil:       #dc3545;
    --align-evil-dark:  #a71d2a;

    /* Reputation colors */
    --rep-hated:     #dc3545;
    --rep-distrusted:#fd7e14;
    --rep-neutral:   #ffc107;
    --rep-respected: #8bc34a;
    --rep-revered:   #28a745;

    /* Disposition colors */
    --disp-hostile:     #dc3545;
    --disp-distrusted:  #fd7e14;
    --disp-neutral:     #6c757d;
    --disp-friendly:    #28a745;
    --disp-allied:      #0d6efd;

    /* Rarity colors (matches inventory) */
    --rarity-common:    #adb5bd;
    --rarity-uncommon:  #28a745;
    --rarity-rare:      #0d6efd;
    --rarity-epic:      #6f42c1;
    --rarity-legendary: #fd7e14;
    --rarity-mythic:    #dc3545;

    /* World accent */
    --world-accent: #c9a84c;
    --world-accent-dim: rgba(201, 168, 76, 0.15);
}


/* ============================================================
   1) ALIGNMENT GRID (3×3 Gesinnungs-Grid)
   ============================================================ */
.alignment-grid {
    display: grid;
    grid-template-columns: auto repeat(3, 1fr);
    grid-template-rows: auto repeat(3, 1fr);
    gap: 4px;
    max-width: 280px;
    user-select: none;
}

.alignment-grid__header {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-secondary-color);
    text-align: center;
    padding: 2px 6px;
}

.alignment-grid__row-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    display: flex;
    align-items: center;
    padding-right: 8px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.alignment-grid__cell {
    width: 64px;
    height: 40px;
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(255,255,255,0.03);
    color: var(--bs-secondary-color);
}

.alignment-grid__cell:hover {
    border-color: rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.08);
}

/* Active / selected cell */
.alignment-grid__cell.active {
    border-width: 2px;
    color: #fff;
    font-weight: 800;
    box-shadow: 0 0 12px rgba(0,0,0,0.3);
}

/* Good row */
.alignment-grid__cell[data-row="good"].active {
    background: var(--align-good);
    border-color: var(--align-good-light);
}
/* Neutral row */
.alignment-grid__cell[data-row="neutral"].active {
    background: var(--align-neutral-dim);
    border-color: var(--align-neutral);
}
/* Evil row */
.alignment-grid__cell[data-row="evil"].active {
    background: var(--align-evil);
    border-color: var(--align-evil-dark);
}

/* Read-only alignment badge (compact) */
.alignment-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}
.alignment-badge--good    { background: rgba(40,167,69,0.2);  color: var(--align-good); }
.alignment-badge--neutral { background: rgba(108,117,125,0.2); color: #adb5bd; }
.alignment-badge--evil    { background: rgba(220,53,69,0.2);  color: var(--align-evil); }


/* ============================================================
   2) UNIFIED ENTITY CARD
   ============================================================ */
.entity-card {
    display: flex;
    gap: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
}

.entity-card:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.entity-card__image {
    flex-shrink: 0;
    width: 80px;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
}

.entity-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.entity-card__image--placeholder {
    font-size: 2rem;
    opacity: 0.3;
}

/* Square image variant (for factions) */
.entity-card__image--square {
    width: 80px;
    height: 80px;
}

/* No image variant (for classes) */
.entity-card--no-image {
    border-left: 4px solid var(--class-color, #6c757d);
    padding-left: 14px;
}

.entity-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.entity-card__name {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.3;
}

.entity-card__subtitle {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
    margin: 0;
    line-height: 1.3;
}

.entity-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 2px;
}

.entity-card__meta-item {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.entity-card__meta-item i {
    font-size: 0.7rem;
    opacity: 0.7;
}

.entity-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: auto;
}


/* ============================================================
   3) STAT MODIFIERS (STR +3, DEX -1, etc.)
   ============================================================ */
.stat-mods {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.stat-mod {
    font-size: 0.7rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(255,255,255,0.05);
    letter-spacing: 0.02em;
}

.stat-mod--positive { color: var(--align-good); }
.stat-mod--negative { color: var(--align-evil); }
.stat-mod--zero     { color: var(--bs-secondary-color); opacity: 0.5; }


/* ============================================================
   4) REPUTATION BAR (Ruf-Balken)
   ============================================================ */
.rep-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

.rep-bar__label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    min-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rep-bar__track {
    flex: 1;
    height: 10px;
    background: rgba(255,255,255,0.08);
    border-radius: 5px;
    overflow: hidden;
    min-width: 80px;
}

.rep-bar__fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.5s ease, background-color 0.3s ease;
}

.rep-bar__fill[data-level="hated"]     { background: var(--rep-hated); }
.rep-bar__fill[data-level="distrusted"]{ background: var(--rep-distrusted); }
.rep-bar__fill[data-level="neutral"]   { background: var(--rep-neutral); }
.rep-bar__fill[data-level="respected"] { background: var(--rep-respected); }
.rep-bar__fill[data-level="revered"]   { background: var(--rep-revered); }

.rep-bar__value {
    font-size: 0.8rem;
    font-weight: 700;
    min-width: 30px;
    text-align: right;
    color: #fff;
}

.rep-bar__rank {
    font-size: 0.7rem;
    color: var(--bs-secondary-color);
    min-width: 90px;
}

/* Compact reputation bar (for entity cards) */
.rep-bar--compact {
    gap: 6px;
    padding: 2px 0;
}
.rep-bar--compact .rep-bar__track { height: 6px; }
.rep-bar--compact .rep-bar__label { font-size: 0.75rem; min-width: 0; }
.rep-bar--compact .rep-bar__value { font-size: 0.7rem; }


/* ============================================================
   5) GM-ONLY BOX
   ============================================================ */
.gm-only-box {
    background: rgba(255, 193, 7, 0.08);
    border-left: 3px solid #ffc107;
    padding: 12px 16px;
    border-radius: 0 6px 6px 0;
    margin: 12px 0;
}

.gm-only-box::before {
    content: "\01F441\FE0F Nur für den Spielleiter";
    display: block;
    font-weight: 700;
    font-size: 0.8rem;
    color: #d4a017;
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}

.gm-only-box p {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.8);
}


/* ============================================================
   6) FILTER BAR
   ============================================================ */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 0;
}

.filter-bar__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: var(--bs-secondary-color);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.filter-bar__btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    color: #fff;
}

.filter-bar__btn.active {
    background: var(--world-accent-dim);
    border-color: var(--world-accent);
    color: var(--world-accent);
    font-weight: 600;
}

.filter-bar__btn i {
    font-size: 0.75rem;
}


/* ============================================================
   7) TAG BADGES
   ============================================================ */
.tag-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.75);
    border: 1px solid rgba(255,255,255,0.06);
    white-space: nowrap;
}

.tag-badge i {
    font-size: 0.65rem;
    opacity: 0.8;
}

/* Removable tag (in edit forms) */
.tag-badge--removable {
    padding-right: 4px;
}

.tag-badge__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: var(--bs-secondary-color);
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.15s;
    border: none;
    padding: 0;
    margin-left: 4px;
}

.tag-badge__remove:hover {
    background: var(--align-evil);
    color: #fff;
}

/* Service type badges */
.tag-badge--quest    { background: rgba(13,110,253,0.15); color: #6ea8fe; border-color: rgba(13,110,253,0.2); }
.tag-badge--trade    { background: rgba(40,167,69,0.15);  color: #75d695; border-color: rgba(40,167,69,0.2); }
.tag-badge--training { background: rgba(255,193,7,0.15);  color: #ffc107; border-color: rgba(255,193,7,0.2); }
.tag-badge--smith    { background: rgba(253,126,20,0.15); color: #fd7e14; border-color: rgba(253,126,20,0.2); }
.tag-badge--info     { background: rgba(108,117,125,0.15);color: #adb5bd; border-color: rgba(108,117,125,0.2); }


/* ============================================================
   8) DISPOSITION BADGE (NPC Haltung)
   ============================================================ */
.disposition-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.disposition-badge--hostile    { background: rgba(220,53,69,0.15);  color: var(--disp-hostile); }
.disposition-badge--distrusted { background: rgba(253,126,20,0.15); color: var(--disp-distrusted); }
.disposition-badge--neutral    { background: rgba(108,117,125,0.15);color: var(--disp-neutral); }
.disposition-badge--friendly   { background: rgba(40,167,69,0.15);  color: var(--disp-friendly); }
.disposition-badge--allied     { background: rgba(13,110,253,0.15); color: var(--disp-allied); }


/* ============================================================
   9) WORLD CARD (Welten-Übersicht)
   ============================================================ */
.world-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.25s ease;
}

.world-card:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.world-card__banner {
    width: 100%;
    height: 100px;
    background: linear-gradient(135deg, rgba(201,168,76,0.2), rgba(108,117,125,0.2));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.world-card__banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.world-card__banner--placeholder {
    font-size: 2.5rem;
    opacity: 0.2;
}

.world-card__body {
    padding: 14px;
}

.world-card__name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
}

.world-card__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.world-card__stat {
    font-size: 0.7rem;
    color: var(--bs-secondary-color);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.world-card__stat i {
    font-size: 0.65rem;
    opacity: 0.6;
}


/* ============================================================
   10) LOOT TABLE & TRADE TABLE
   ============================================================ */
.loot-table,
.trade-table {
    width: 100%;
    font-size: 0.8rem;
    border-collapse: separate;
    border-spacing: 0;
}

.loot-table th,
.trade-table th {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-secondary-color);
    padding: 6px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    text-align: left;
}

.loot-table td,
.trade-table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.85);
    vertical-align: middle;
}

.loot-table tr:last-child td,
.trade-table tr:last-child td {
    border-bottom: none;
}

/* Rarity dot indicator */
.rarity-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.rarity-dot--common    { background: var(--rarity-common); }
.rarity-dot--uncommon  { background: var(--rarity-uncommon); }
.rarity-dot--rare      { background: var(--rarity-rare); }
.rarity-dot--epic      { background: var(--rarity-epic); }
.rarity-dot--legendary { background: var(--rarity-legendary); }
.rarity-dot--mythic    { background: var(--rarity-mythic); }


/* ============================================================
   11) SECTION HEADER (within tabs)
   ============================================================ */
.world-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.world-section-header__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.world-section-header__title i {
    color: var(--world-accent);
}

.world-section-header__actions {
    display: flex;
    gap: 8px;
}


/* ============================================================
   12) ENTITY LIST (stacked cards)
   ============================================================ */
.entity-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Empty state */
.entity-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--bs-secondary-color);
}

.entity-empty__icon {
    font-size: 3rem;
    opacity: 0.2;
    margin-bottom: 12px;
}

.entity-empty__text {
    font-size: 0.9rem;
    margin-bottom: 16px;
}


/* ============================================================
   13) ACCORDION FORM SECTIONS (für komplexe Modals)
   ============================================================ */
.form-accordion__section {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}

.form-accordion__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.04);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    color: #fff;
    user-select: none;
    transition: background 0.15s;
}

.form-accordion__header:hover {
    background: rgba(255,255,255,0.07);
}

.form-accordion__header i.fa-chevron-down {
    transition: transform 0.2s;
    margin-left: auto;
    font-size: 0.7rem;
    opacity: 0.5;
}

.form-accordion__section.collapsed .form-accordion__header i.fa-chevron-down {
    transform: rotate(-90deg);
}

.form-accordion__body {
    padding: 14px;
}

.form-accordion__section.collapsed .form-accordion__body {
    display: none;
}


/* ============================================================
   14) DYNAMIC ROW (repeatable form rows: traits, relations, etc.)
   ============================================================ */
.dynamic-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.dynamic-row:last-child {
    border-bottom: none;
}

.dynamic-row .form-control,
.dynamic-row .form-select {
    font-size: 0.85rem;
}

.dynamic-row__remove {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(220,53,69,0.15);
    color: var(--align-evil);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.7rem;
    transition: all 0.15s;
}

.dynamic-row__remove:hover {
    background: var(--align-evil);
    color: #fff;
}

.dynamic-rows__add {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px dashed rgba(255,255,255,0.15);
    border-radius: 6px;
    background: transparent;
    color: var(--bs-secondary-color);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
    margin-top: 8px;
}

.dynamic-rows__add:hover {
    border-color: var(--world-accent);
    color: var(--world-accent);
    background: var(--world-accent-dim);
}


/* 14b) LOOT ENTRIES (added items) */
.loot-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    margin-bottom: 6px;
    transition: border-color 0.2s ease;
}

.loot-entry:hover {
    border-color: rgba(255,255,255,0.18);
}

.loot-entry__info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.loot-entry__info .rarity-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.loot-entry__name {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.loot-entry__controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.loot-entry__remove {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    font-size: 0.7rem;
    transition: all 0.2s ease;
}

.loot-entry__remove:hover {
    background: rgba(220,53,69,0.3);
    border-color: rgba(220,53,69,0.5);
    color: #ff6b6b;
}

/* 14c) LOOT ITEM PICKER (search + select) */
.loot-picker {
    margin-top: 8px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    overflow: hidden;
}

.loot-picker__search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.loot-picker__search i {
    color: rgba(255,255,255,0.35);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.loot-picker__search .form-control {
    border: none !important;
    background: transparent !important;
    padding: 0;
    font-size: 0.85rem;
    box-shadow: none !important;
}

.loot-picker__results {
    max-height: 200px;
    overflow-y: auto;
}

.loot-picker__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    cursor: pointer;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.85);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.15s ease;
}

.loot-picker__item:last-child {
    border-bottom: none;
}

.loot-picker__item:hover:not(.loot-picker__item--used) {
    background: rgba(93,214,201,0.12);
}

.loot-picker__item--used {
    opacity: 0.35;
    cursor: default;
}

.loot-picker__item .rarity-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.loot-picker__item-name {
    font-weight: 600;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.loot-picker__item-type {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.35);
    flex-shrink: 0;
}


/* ============================================================
   15) RELATION INDICATORS (Beziehungen)
   ============================================================ */
.relation-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    padding: 3px 0;
}

.relation-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.relation-dot--allied    { background: var(--align-good); }
.relation-dot--friendly  { background: var(--rep-respected); }
.relation-dot--neutral   { background: var(--align-neutral); }
.relation-dot--unfriendly{ background: var(--rep-distrusted); }
.relation-dot--hostile   { background: var(--align-evil); }


/* ============================================================
   16) WORLD DETAIL HEADER
   ============================================================ */
.world-header {
    position: relative;
    margin: -16px -16px 16px;
    overflow: hidden;
}

.world-header__banner {
    width: 100%;
    height: 140px;
    background: linear-gradient(135deg, rgba(201,168,76,0.15), rgba(108,117,125,0.15));
    overflow: hidden;
}

.world-header__banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.world-header__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 16px 14px;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
}

.world-header__name {
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 2px;
}

.world-header__desc {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.65);
    margin: 0 0 4px;
    font-style: italic;
}

.world-header__meta {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    gap: 6px;
}

.world-header__actions {
    position: absolute;
    top: 10px;
    right: 10px;
}


/* ============================================================
   17) SEARCH INPUT (for Lore)
   ============================================================ */
.world-search {
    position: relative;
    margin-bottom: 12px;
}

.world-search__input {
    width: 100%;
    padding: 8px 14px 8px 36px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 0.85rem;
    transition: border-color 0.2s;
}

.world-search__input::placeholder {
    color: rgba(255,255,255,0.3);
}

.world-search__input:focus {
    outline: none;
    border-color: var(--world-accent);
    background: rgba(255,255,255,0.08);
}

.world-search__icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.3);
    font-size: 0.8rem;
}


/* ============================================================
   18) RESPONSIVE
   ============================================================ */
@media (max-width: 576px) {
    .entity-card__image {
        width: 60px;
        height: 90px;
    }

    .alignment-grid__cell {
        width: 50px;
        height: 34px;
        font-size: 0.65rem;
    }

    .rep-bar__label {
        min-width: 80px;
        font-size: 0.75rem;
    }

    .world-card__banner {
        height: 80px;
    }

    .world-header__banner {
        height: 100px;
    }

    .world-header__name {
        font-size: 1.15rem;
    }
}
/* ============================================================
   19) WORLD SURFACE OVERRIDES
   Bootstrap bg-dark (#212529) und bg-black (#000) sind zu hart
   innerhalb der World-Page. Hier ersetzen wir sie durch
   semitransparente Surfaces die zum restlichen World-Design passen.
   ============================================================ */

/* Outer section cards: bg-dark → subtle glass surface */
[data-spa-page="world"] .card.bg-dark {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* Inner surfaces: bg-black → lighter inset surface */
[data-spa-page="world"] .bg-black {
    background: rgba(255,255,255,0.04) !important;
}

/* Nested cards (e.g. faction cards inside section card) */
[data-spa-page="world"] .card .card.bg-black {
    background: rgba(255,255,255,0.035) !important;
    border-color: rgba(255,255,255,0.07) !important;
}

/* bg-black with bg-opacity-50 (used in create-wizard) */
[data-spa-page="world"] .bg-black.bg-opacity-50 {
    background: rgba(255,255,255,0.03) !important;
}

/* Table overrides: table-dark is too harsh inside world context */
[data-spa-page="world"] .table-dark {
    --bs-table-bg: rgba(255,255,255,0.02);
    --bs-table-border-color: rgba(255,255,255,0.06);
    --bs-table-striped-bg: rgba(255,255,255,0.04);
    --bs-table-hover-bg: rgba(255,255,255,0.06);
}

/* Form inputs inside world context: slightly lighter */
[data-spa-page="world"] .form-control.bg-dark,
[data-spa-page="world"] .form-select.bg-dark {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.1) !important;
}

/* form-check-input switch track (Bootstrap default is too dark) */
[data-spa-page="world"] .form-check-input:not(:checked) {
    background-color: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.15);
}


/* ============================================================
   20) WORLD SETTINGS — Sections, Toggles, Stats, GM Cards
   ============================================================ */

/* --- Section Container --- */
.world-settings-section,
.world-settings-stats,
.world-settings-danger {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 20px;
}

.world-settings-section {
    border-left: 3px solid var(--section-accent, rgba(255,255,255,0.15));
}

/* --- Section Header --- */
.world-settings-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}

.world-settings-section-header i {
    color: var(--section-accent, var(--world-accent));
    font-size: 1rem;
}

.world-settings-section-header--danger {
    color: var(--align-evil);
}

.world-settings-section-header--danger i {
    color: var(--align-evil);
}

.world-settings-section-desc {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
    margin: 0 0 16px;
    line-height: 1.5;
}

/* --- Stats Grid --- */
.world-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
}

.world-stat-box {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    padding: 12px 10px;
    text-align: center;
    transition: all 0.2s ease;
}

.world-stat-box:hover {
    background: rgba(255,255,255,0.07);
    border-color: var(--stat-color, rgba(255,255,255,0.15));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.world-stat-box__count {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--stat-color, #fff);
    line-height: 1;
    margin-bottom: 4px;
}

.world-stat-box__label {
    font-size: 0.7rem;
    color: var(--bs-secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.world-stat-box__label i {
    font-size: 0.65rem;
    color: var(--stat-color, var(--bs-secondary-color));
    opacity: 0.7;
}

/* --- Toggle Rows --- */
.world-settings-toggle {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    margin-bottom: 8px;
    transition: all 0.15s ease;
}

.world-settings-toggle:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
}

.world-settings-toggle__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--toggle-color, var(--bs-secondary-color));
    font-size: 1rem;
}

.world-settings-toggle__body {
    flex: 1;
    min-width: 0;
}

.world-settings-toggle__label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    margin-bottom: 1px;
}

.world-settings-toggle__desc {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    line-height: 1.4;
}

.world-settings-toggle__switch {
    flex-shrink: 0;
    padding-left: 2.5em;
}

.world-settings-toggle__switch .form-check-input {
    width: 2.8em;
    height: 1.4em;
    cursor: pointer;
}

/* --- Config Grid --- */
.world-settings-config-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.world-settings-config-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
}

.world-settings-config-item__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.world-settings-config-item__body {
    flex: 1;
    min-width: 0;
}

.world-settings-config-item__label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 1px;
}

.world-settings-config-item__desc {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    line-height: 1.4;
}

.world-settings-config-item__input {
    flex-shrink: 0;
    width: 120px;
}

.world-settings-config-item__input .form-control {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
    color: #fff;
    text-align: center;
}

.world-settings-config-item__input .form-control:focus {
    border-color: var(--world-accent);
    background: rgba(255,255,255,0.08);
}

/* --- GM / Player Cards --- */
.world-settings-gm-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.world-settings-gm-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    transition: all 0.15s ease;
}

.world-settings-gm-card:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
}

.world-settings-gm-card__avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--bs-secondary-color);
    font-size: 1rem;
}

.world-settings-gm-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.world-settings-gm-card__info {
    flex: 1;
    min-width: 0;
}

.world-settings-gm-card__name {
    display: block;
    font-weight: 600;
    color: #fff;
    font-size: 0.9rem;
}

.world-settings-gm-card__role {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: #ffc107;
}

.world-settings-gm-card__role i {
    font-size: 0.65rem;
}

.world-settings-gm-badge {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.world-settings-gm-badge--admin {
    background: rgba(13,110,253,0.2);
    color: #6ea8fe;
}

.world-settings-gm-card__action,
.world-settings-gm-card__actions {
    flex-shrink: 0;
}

.world-settings-gm-remove {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: var(--bs-secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    transition: all 0.15s ease;
}

.world-settings-gm-remove:hover {
    background: rgba(220,53,69,0.2);
    border-color: rgba(220,53,69,0.4);
    color: var(--align-evil);
}

.world-settings-gm-promote {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: var(--bs-secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    transition: all 0.15s ease;
}

.world-settings-gm-promote:hover {
    background: rgba(255,193,7,0.2);
    border-color: rgba(255,193,7,0.4);
    color: #ffc107;
}

.world-settings-gm-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    color: var(--bs-secondary-color);
    font-size: 0.85rem;
    font-style: italic;
}

.world-settings-gm-empty i {
    font-size: 1.2rem;
    opacity: 0.4;
}

/* GM/Player Add Form */
.world-settings-gm-add {
    margin-top: 8px;
}

.world-settings-gm-add__row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.world-settings-gm-add__row .form-select {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
    color: #fff;
    font-size: 0.85rem;
}

.world-settings-gm-add__row .form-select:focus {
    border-color: var(--world-accent);
    background: rgba(255,255,255,0.08);
}

/* --- Danger Zone --- */
.world-settings-danger {
    border-color: rgba(220,53,69,0.25);
    background: rgba(220,53,69,0.04);
}

.world-settings-danger__content {
    margin-top: 12px;
}

.world-settings-danger__item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 12px 14px;
    background: rgba(220,53,69,0.06);
    border: 1px solid rgba(220,53,69,0.15);
    border-radius: 8px;
}

.world-settings-danger__info {
    flex: 1;
    min-width: 0;
}

.world-settings-danger__info strong {
    display: block;
    color: #fff;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.world-settings-danger__desc {
    display: block;
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
    line-height: 1.5;
}


/* ============================================================
   21) WORLD TEAM (Overview Page)
   ============================================================ */
.world-team-count {
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(255,255,255,0.1);
    color: var(--bs-secondary-color);
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: auto;
}

.world-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.world-team-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    text-align: center;
    transition: all 0.2s ease;
}

.world-team-member:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.12);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.world-team-member__avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--bs-secondary-color);
    font-size: 1.2rem;
    border: 2px solid rgba(255,255,255,0.1);
}

.world-team-member__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.world-team-member__name {
    font-weight: 600;
    font-size: 0.85rem;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.world-team-member__role {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}

.world-team-member__badge {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.world-team-member__badge i {
    font-size: 0.55rem;
}

.world-team-member__badge--gm {
    background: rgba(255,193,7,0.15);
    color: #ffc107;
}

.world-team-member__badge--player {
    background: rgba(93,214,201,0.15);
    color: var(--accent);
}

.world-team-member__badge--admin {
    background: rgba(13,110,253,0.15);
    color: #6ea8fe;
    font-size: 0.6rem;
    padding: 1px 6px;
}


/* ============================================================
   22a) WORLD GROUPS — Team Member Pills
   ============================================================ */

.world-groups-team {
    padding: 10px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    border-left: 3px solid rgba(255,193,7,0.35);
}

.world-groups-team__member {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 4px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    transition: all 0.2s ease;
}

.world-groups-team__member:hover {
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.15);
}

.world-groups-team__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--bs-secondary-color);
    font-size: 0.7rem;
    border: 2px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
}

.world-groups-team__avatar--gm {
    border-color: rgba(255,193,7,0.4);
}

.world-groups-team__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.world-groups-team__name {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.world-groups-team__badge {
    font-size: 0.6rem;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.world-groups-team__badge--gm {
    color: #ffc107;
}

.world-groups-team__badge--player {
    color: var(--accent);
}


/* ============================================================
   22) RESPONSIVE — Settings & Team
   ============================================================ */
@media (max-width: 576px) {
    .world-settings-section,
    .world-settings-stats,
    .world-settings-danger {
        padding: 14px;
    }

    .world-stats-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 6px;
    }

    .world-stat-box {
        padding: 10px 6px;
    }

    .world-stat-box__count {
        font-size: 1.2rem;
    }

    .world-settings-toggle {
        flex-wrap: wrap;
        gap: 8px;
    }

    .world-settings-toggle__switch {
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }

    .world-settings-config-item {
        flex-wrap: wrap;
    }

    .world-settings-config-item__input {
        width: 100%;
    }

    .world-settings-gm-add__row {
        flex-direction: column;
    }

    .world-settings-gm-add__row .form-select,
    .world-settings-gm-add__row .btn {
        width: 100%;
    }

    .world-settings-danger__item {
        flex-direction: column;
        gap: 12px;
    }

    .world-team-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }

    .world-team-member {
        padding: 12px 8px;
    }

    .world-team-member__avatar {
        width: 44px;
        height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .world-stat-box,
    .world-settings-toggle,
    .world-settings-gm-card,
    .world-team-member,
    .world-groups-team__member {
        transition: none;
    }
    .world-stat-box:hover,
    .world-team-member:hover {
        transform: none;
    }
}

/* ============================================================================
   WORLD USER SEARCH — Button + Suchpanel statt Dropdown
   ============================================================================ */
.world-user-search-area {
    margin-top: 10px;
}

.world-user-search-panel {
    margin-top: 8px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 10px;
    backdrop-filter: blur(6px);
}

.world-user-search-input-wrap {
    position: relative;
    margin-bottom: 8px;
}

.world-user-search-input-wrap > i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.3);
    font-size: 0.8rem;
    pointer-events: none;
}

.world-user-search-input-wrap input {
    padding-left: 32px;
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
    color: #fff;
    font-size: 0.85rem;
}

.world-user-search-input-wrap input:focus {
    background: rgba(255,255,255,0.08);
    border-color: var(--accent, #5dd6c9);
    box-shadow: 0 0 0 2px rgba(93,214,201,0.15);
}

.world-user-search-results {
    max-height: 240px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.world-user-search-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.world-user-search-card:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
}

.world-user-search-card__avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: rgba(255,255,255,0.4);
    font-size: 0.9rem;
}

.world-user-search-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.world-user-search-card__info {
    flex: 1;
    min-width: 0;
}

.world-user-search-card__name {
    display: block;
    font-weight: 600;
    color: #fff;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.world-user-search-card__username {
    display: block;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.4);
}

.world-user-search-badge--admin {
    font-size: 0.6rem;
    padding: 2px 6px;
    background: rgba(255,193,7,0.15);
    color: #ffc107;
    border: 1px solid rgba(255,193,7,0.2);
    border-radius: 4px;
}

.world-user-search-empty {
    text-align: center;
    padding: 16px;
    color: rgba(255,255,255,0.35);
    font-size: 0.8rem;
}

.world-user-search-empty i {
    margin-right: 6px;
}