@import "../variables";
@import "../utilities";

.system-vermine2047 .vermine2047.actor.group {
  .char-header {
    .background-image(url("@{ui-path}/barre_haut.webp"), no-repeat, 100% 100%, right top);
    max-height: 110px;
  }

  .char-details {
    h1.char-name input,
    .char-vermine2047 a.chooseTotem {
      font-family: "DistressBlack", sans-serif;
      text-transform: uppercase;
    }
  }

  // ── Titres de section : uniforme (centré, scotch, majuscules) ───────
  h4 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: "DistressBlack", sans-serif;
    text-transform: uppercase;
    font-size: @font-size-14;
    text-align: center;
    padding: 2px 8px;
    margin: 0 0 8px;
    background: 50% 0% / cover no-repeat url("@{ui-path}/scotch.webp");

    a {
      color: inherit;
      opacity: 0.85;

      &:hover { opacity: 1; }
    }
  }

  // ── Sous-titres (ex. Objectifs majeurs / mineurs) ───────────────────
  h5 {
    font-family: "DistressBlack", sans-serif;
    text-transform: uppercase;
    font-size: @font-size-12;
    color: @color-amber;
    margin: 8px 0 4px;
    text-align: left;
    border-bottom: none;
  }

  // ── Liste uniforme (objectifs, capacités, membres, rencontres) ──────
  .group-list {
    list-style: none;
    margin: 0;
    padding: 0;

    > li {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 4px 6px;
      border-bottom: 1px solid @color-border-dark-3;

      &:last-child { border-bottom: none; }
      &:hover { box-shadow: 0 0 10px @theme-color-highlight inset; }
    }

    > li.group-list-header {
      font-weight: bold;
      text-transform: uppercase;
      font-size: @font-size-12;
      border-bottom: 2px solid @color-border-dark-3;
      box-shadow: none;

      > div { text-align: center; }
    }

    .item-name, .actor-name {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .item-controls {
      flex: 0 0 auto;
      display: flex;
      gap: 6px;
    }

    input[type="text"] {
      flex: 1;
      min-width: 0;
    }
  }

  // ── Champs (Origine, Concept, Instincts, Interdits…) ────────────────
  .group-field {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;

    label {
      flex: 0 0 auto;
      font-weight: bold;
      white-space: nowrap;
    }

    > :last-child {
      flex: 1;
      min-width: 0;
    }

    input[type="text"] { width: 100%; }
  }

  // ── Colonnes des tableaux (Rencontres) ──────────────────────────────
  .gcol-name    { flex: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gcol-profile { flex: 3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gcol-totem   { flex: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .reserve-control,
  .morale-control {
    .card-style();

    label {
      font-weight: bold;
      margin-right: 8px;
      min-width: 80px;
    }

    input, select {
      margin-right: 8px;
      min-width: 50px;
      text-align: center;
    }
  }

  .totem-display {
    .card-style();
    flex: 1;

    span { font-weight: bold; }
  }

  .level input,
  .reputation input {
    width: 60px;
    text-align: center;
  }
}