/* ============================================================================
   RPG Character Traits — Eigenschaften, Skills & Schwächen
   LA Midnight Brutalist Theme
   ============================================================================ */


/* ============================================================================
   1. PROFIL-ANSICHT
   ============================================================================ */

   .rpg-traits-infobox,
   .rpg-skills-infobox,
   .rpg-weaknesses-infobox { background: transparent; }
   
   .rpg-traits-category { margin-bottom: 0.75rem; }
   .rpg-traits-category:last-child { margin-bottom: 0; }
   
   .rpg-traits-category__label {
       display: flex;
       align-items: center;
       gap: 0.4rem;
       margin-bottom: 0.4rem;
       font-family: var(--font-mono);
       font-size: 0.6rem;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.12em;
   }
   .rpg-traits-category__label i { font-size: 0.6rem; }
   .rpg-traits-category__label--positive { color: var(--success); }
   .rpg-traits-category__label--negative { color: var(--error); }
   .rpg-traits-category__label--neutral  { color: var(--text-dim); }
   
   .rpg-traits-category__badges { display: flex; flex-wrap: wrap; gap: 0.4rem; }
   
   /* Badge */
   .rpg-trait-badge {
       display: inline-flex;
       align-items: center;
       padding: 0.2rem 0.6rem;
       font-family: var(--font-mono);
       font-size: 0.6rem;
       font-weight: 500;
       letter-spacing: 0.08em;
       text-transform: uppercase;
       background: transparent;
       border: 1px solid var(--border-light);
       cursor: default;
   }
   .rpg-trait-badge--positive { color: var(--success); border-left: 3px solid var(--success); }
   .rpg-trait-badge--negative { color: var(--error);   border-left: 3px solid var(--error); }
   .rpg-trait-badge--neutral  { color: var(--text-dim);border-left: 3px solid var(--border-light); }
   
   /* Skill / Schwächen Profil */
   .rpg-skill-item,
   .rpg-weakness-item { margin-bottom: 0.75rem; }
   .rpg-skill-item:last-child,
   .rpg-weakness-item:last-child { margin-bottom: 0; }
   
   .rpg-skill-header,
   .rpg-weakness-header {
       display: flex;
       justify-content: space-between;
       align-items: baseline;
       margin-bottom: 0.3rem;
   }
   .rpg-skill-name,
   .rpg-weakness-name { font-family: var(--font-body); font-size: 0.8rem; font-weight: 500; color: var(--text); }
   .rpg-skill-value    { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600; color: var(--accent); }
   .rpg-weakness-value { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600; color: var(--error); }
   
   .rpg-skill-bar,
   .rpg-weakness-bar { position: relative; height: 4px; background: var(--border-light); overflow: hidden; }
   .rpg-skill-bar--small,
   .rpg-weakness-bar--small { height: 3px; }
   
   .rpg-skill-bar__fill {
       position: absolute; top: 0; left: 0; height: 100%;
       background: var(--accent);
       transition: width 0.4s var(--ease);
   }
   .rpg-skill-bar__fill[data-level="low"]    { background: var(--error); }
   .rpg-skill-bar__fill[data-level="medium"] { background: var(--warning); }
   .rpg-skill-bar__fill[data-level="high"]   { background: var(--success); }
   .rpg-skill-bar__fill[data-level="max"]    { background: var(--accent); }
   
   .rpg-weakness-bar__fill {
       position: absolute; top: 0; left: 0; height: 100%;
       background: var(--error);
       transition: width 0.4s var(--ease);
   }
   
   .rpg-traits-empty,
   .rpg-skills-empty,
   .rpg-weaknesses-empty {
       font-family: var(--font-mono);
       font-size: 0.6rem;
       letter-spacing: 0.1em;
       text-transform: uppercase;
       color: var(--text-dim);
       padding: 0.5rem 0;
   }
   
   
   /* ============================================================================
      2. UCP-VERWALTUNG
      ============================================================================ */
   
   /* Abschnitts-Box */
   .rpg-traits-ucp-section {
       border: 1px solid var(--border-light);
       border-top: 2px solid var(--text-dim);
       margin-bottom: 1.5rem;
       background: var(--bg-card);
   }
   
   /* Abschnitts-Kopfzeile */
   .rpg-traits-ucp-section__title {
       display: flex;
       align-items: center;
       gap: 0.6rem;
       padding: 0.8rem 1rem;
       margin: 0;
       background: var(--bg-alt);
       border-bottom: 1px solid var(--border-light);
       font-family: var(--font-display);
       font-size: 1.05rem;
       letter-spacing: 0.06em;
       color: var(--text);
   }
   .rpg-traits-ucp-section__title i {
       font-size: 0.75rem;
       color: var(--accent);
   }
   
   /* Anforderungs-Leiste */
   .rpg-traits-requirements {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       gap: 0.4rem;
       padding: 0.55rem 1rem;
       background: var(--bg-alt);
       border-bottom: 1px solid var(--border-light);
   }
   .rpg-traits-requirement {
       display: inline-flex;
       align-items: center;
       gap: 0.3rem;
       padding: 0.15rem 0.5rem;
       font-family: var(--font-mono);
       font-size: 0.58rem;
       font-weight: 500;
       letter-spacing: 0.07em;
       text-transform: uppercase;
       color: var(--text-dim);
       border-left: 2px solid var(--border-light);
   }
   .rpg-traits-requirement--fulfilled { color: var(--success); border-left-color: var(--success); }
   .rpg-traits-requirement--missing   { color: var(--error);   border-left-color: var(--error); }
   .rpg-traits-requirement--total     { color: var(--text-dim); }
   
   /* Hinzufügen-Formular
      Elemente grenzen direkt aneinander, kein gap */
   .rpg-traits-ucp-add {
       display: flex;
       align-items: stretch;
       border-bottom: 1px solid var(--border-light);
       background: var(--bg-alt);
   }
   
   .rpg-traits-input {
       flex: 1;
       min-width: 0;
       height: 42px;
       padding: 0 0.875rem;
       font-family: var(--font-body);
       font-size: 0.85rem;
       color: var(--text);
       background: var(--bg);
       border: none;
       border-right: 1px solid var(--border-light);
       outline: none;
   }
   .rpg-traits-input:focus { border-right-color: var(--accent); }
   .rpg-traits-input::placeholder { color: var(--text-dim); }
   
   .rpg-traits-select {
       height: 42px;
       padding: 0 0.75rem;
       font-family: var(--font-mono);
       font-size: 0.6rem;
       letter-spacing: 0.06em;
       color: var(--text-muted);
       background: var(--bg);
       border: none;
       border-right: 1px solid var(--border-light);
       cursor: pointer;
       outline: none;
       flex-shrink: 0;
   }
   
   .rpg-traits-range {
       flex: 1;
       min-width: 100px;
       max-width: 160px;
       padding: 0 0.75rem;
       cursor: pointer;
       accent-color: var(--accent);
       background: var(--bg);
       border-right: 1px solid var(--border-light);
       height: 42px;
       align-self: stretch;
   }
   
   .rpg-traits-range-value {
       display: flex;
       align-items: center;
       padding: 0 0.6rem;
       font-family: var(--font-mono);
       font-size: 0.62rem;
       font-weight: 600;
       color: var(--text-muted);
       min-width: 44px;
       background: var(--bg);
       border-right: 1px solid var(--border-light);
   }
   
   /* Submit-Button im Formular – nutzt .rpg-ucp-submit aus rpg_ucp_manager.css */
   /* Kein eigener Stil hier nötig */
   
   
   /* ============================================================================
      BUTTONS
      Basis-Reset damit kein globales Button-Styling durchschlägt
      ============================================================================ */
   
   .rpg-traits-btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 0.3rem;
       font-family: var(--font-mono);
       font-size: 0.62rem;
       letter-spacing: 0.06em;
       text-transform: uppercase;
       background: transparent;
       border: none;
       color: var(--text-dim);
       cursor: pointer;
       transition: color 0.15s, background 0.15s;
       white-space: nowrap;
   }
   
   /* Sort-Buttons: sichtbare Box, kompakt */
   .rpg-traits-btn--sort {
       width: 28px;
       height: 28px;
       padding: 0;
       font-size: 0.65rem;
       background: var(--bg-alt);
       border: 1px solid var(--text-dim);    /* text-dim = #555, auf dunklem BG sichtbar */
       color: var(--text-dim);
   }
   .rpg-traits-btn--sort:hover {
       color: var(--text);
       border-color: var(--text-muted);
       background: var(--bg-card);
   }
   
   /* Save-Button: steht am Ende der Level-Form */
   .rpg-traits-btn--save {
       padding: 0 0.75rem;
       align-self: stretch;
       font-size: 0.8rem;
       color: var(--text-dim);
       border-left: 1px solid var(--border-light);
   }
   .rpg-traits-btn--save:hover {
       color: var(--success);
       background: transparent;
   }
   
   /* Delete-Button: rechts außen, kein Rand */
   .rpg-traits-btn--delete {
       padding: 0 0.875rem;
       align-self: stretch;
       font-size: 0.8rem;
       color: var(--text-dim);
       border-left: 1px solid var(--border-light);
   }
   .rpg-traits-btn--delete:hover {
       color: var(--error);
       background: transparent;
   }
   
   
   /* ============================================================================
      ITEM-LISTE
      Exakt auf die Template-Struktur abgestimmt:
      Trait-Row:  [badge][category flex:1][sort-form][delete-form]
      Skill-Row:  [name flex:1][level-form][sort-form][delete-form]
      ============================================================================ */
   
   .rpg-traits-ucp-list {
       display: flex;
       flex-direction: column;
   }
   
   /* Zeile */
   .rpg-traits-ucp-item {
       display: flex;
       align-items: stretch;               /* alle Kinder strecken sich auf Zeilenhöhe */
       min-height: 48px;
       border-bottom: 1px solid var(--border-light);
       border-left: 3px solid transparent;
       background: var(--bg-card);
       transition: border-left-color 0.15s, background 0.15s;
   }
   .rpg-traits-ucp-item:last-child { border-bottom: none; }
   .rpg-traits-ucp-item:hover {
       border-left-color: var(--accent);
       background: var(--bg-alt);
   }
   
   /* Badge – direkt in der Zeile (Trait-Row) */
   .rpg-traits-ucp-item > .rpg-trait-badge {
       align-self: center;
       flex-shrink: 0;
       margin-left: 1rem;
       font-size: 0.58rem;
       padding: 0.15rem 0.55rem;
   }
   
   /* Kategorie-Label – flex:1 schiebt Sort/Delete nach rechts */
   .rpg-traits-ucp-item__category {
       flex: 1;
       display: flex;
       align-items: center;
       padding: 0 0.875rem;
       font-family: var(--font-mono);
       font-size: 0.58rem;
       letter-spacing: 0.1em;
       text-transform: uppercase;
       color: var(--text-dim);
   }
   
   /* Name (Skill / Schwäche) – flex:1 schiebt Level/Sort/Delete nach rechts */
   .rpg-traits-ucp-item__name {
       flex: 1;
       display: flex;
       align-items: center;
       padding: 0 1rem;
       font-family: var(--font-body);
       font-size: 0.875rem;
       font-weight: 500;
       color: var(--text);
       min-width: 0;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
   }
   
   /* Level-Form (range + level-text + save)
      Ist ein <form>-Element, daher display:flex explizit setzen */
   .rpg-traits-ucp-item__level {
       display: flex;
       align-items: stretch;
       flex-shrink: 0;
       border-left: 1px solid var(--border-light);
   }
   .rpg-traits-ucp-item__level input[type="range"] {
       width: 140px;
       height: 100%;
       padding: 0 0.5rem;
       cursor: pointer;
       accent-color: var(--accent);
       background: transparent;
       border: none;
       align-self: center;
   }
   .rpg-traits-ucp-item__level-text {
       display: flex;
       align-items: center;
       padding: 0 0.5rem;
       font-family: var(--font-mono);
       font-size: 0.62rem;
       font-weight: 600;
       color: var(--text-muted);
       min-width: 42px;
       justify-content: flex-end;
       border-left: 1px solid var(--border-light);
   }
   
   /* Sort-Form – ist ein <form>, kein <div> */
   .rpg-traits-ucp-item__sort {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: 3px;
       padding: 0 0.5rem;
       flex-shrink: 0;
       border-left: 1px solid var(--border-light);
       background: var(--bg-alt);
   }
   
   /* Delete-Form */
   .rpg-traits-ucp-item__delete {
       display: flex;
       align-items: stretch;
       flex-shrink: 0;
   }
   
   
   /* ============================================================================
      VALIDATION & EMPTY STATE
      ============================================================================ */
   
   .rpg-traits-validation {
       display: flex;
       align-items: center;
       gap: 0.6rem;
       padding: 0.6rem 1rem;
       font-family: var(--font-mono);
       font-size: 0.6rem;
       letter-spacing: 0.08em;
       text-transform: uppercase;
       border-left: 3px solid transparent;
   }
   .rpg-traits-validation--warning { color: var(--warning); border-left-color: var(--warning); }
   .rpg-traits-validation--error   { color: var(--error);   border-left-color: var(--error); }
   .rpg-traits-validation--success { color: var(--success); border-left-color: var(--success); }
   
   .rpg-traits-ucp-empty {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 0.5rem;
       padding: 2rem 1rem;
       border-bottom: 1px solid var(--border-light);
   }
   .rpg-traits-ucp-empty i { font-size: 1.25rem; color: var(--text-dim); opacity: 0.4; }
   .rpg-traits-ucp-empty p,
   .rpg-traits-ucp-empty span {
       font-family: var(--font-mono);
       font-size: 0.6rem;
       letter-spacing: 0.1em;
       text-transform: uppercase;
       color: var(--text-dim);
       margin: 0;
   }
   
   
   /* ============================================================================
      RESPONSIVE
      ============================================================================ */
   
   @media (max-width: 700px) {
       .rpg-traits-ucp-add { flex-wrap: wrap; }
       .rpg-traits-input   { height: 38px; border-right: none; border-bottom: 1px solid var(--border-light); }
       .rpg-traits-range   { max-width: none; flex: 1; }
   
       .rpg-traits-ucp-item         { flex-wrap: wrap; min-height: auto; }
       .rpg-traits-ucp-item__name   { padding: 0.75rem 1rem; }
       .rpg-traits-ucp-item__level  { width: 100%; border-left: none; border-top: 1px solid var(--border-light); }
       .rpg-traits-ucp-item__level input[type="range"] { flex: 1; width: auto; }
       .rpg-traits-ucp-item__sort   { flex-direction: row; border-left: none; border-top: 1px solid var(--border-light); width: 100%; padding: 0.4rem 1rem; justify-content: flex-start; background: transparent; }
   }