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

.system-vermine2047 .vermine2047.actor.creature {
  .sheet-header {
    .background-image(url("@{ui-path}/barre_haut.webp"), no-repeat, 100% 100%, right top);
    padding: 10px;
    overflow: visible;
  }

  .header-fields { flex: 1; }
  .resources { margin-bottom: 10px; }

  .resource {
    .card-style();

    // Le mixin card-style ajoute un margin-bottom (15px) : inutile dans le
    // header, on le neutralise pour garder une hauteur compacte.
    margin-bottom: 8px;
  }

  .resource-label {
    font-weight: bold;
    margin-right: 8px;
    min-width: 60px;
    font-size: @font-size-12;
  }

  .resource-content {
    display: flex;
    align-items: center;

    select {
      margin-right: 8px;
      min-width: 80px;
    }
  }

  .charname {
    margin: 0;
    height: auto;
    font-size: @font-size-18;
    line-height: 1.2;

    span,
    input {
      font-size: @font-size-18;
      font-weight: bold;
      text-align: center;
    }

    input {
      width: 100%;
    }
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .stat {
    .card-style();
    display: flex;
    justify-content: space-between;

    label { font-weight: bold; }
    span {
      font-weight: bold;
      color: @theme-color-light;
    }
  }

  .mdb {
    &:not(.row) {
      .card-style();
    }

    h4:first-child {
      font-family: "DistressBlack", sans-serif;
      text-transform: uppercase;
      font-size: @font-size-14;
      margin-top: 0;
      border-bottom: 1px solid @color-border-dark-3;
      padding-bottom: 5px;
      text-align: center;
      background: 50% 0% / cover no-repeat url("@{ui-path}/scotch.webp");
    }

    ul.unstyled {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    li {
      padding: 3px 0;
      border-bottom: 1px solid @color-border-dark-3;

      &:last-child { border-bottom: none; }
    }
  }

  input[type="text"] {
    width: 100%;
    padding: 5px;
    margin-bottom: 8px;
  }

  .grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;

    label {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 5px;
    }
  }

  .row.mdb {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  // ── Cases de blessures (hexagones) ──────────────────────────────────
  // Le radio est masqué et recouvre l'hexagone : cliquer sur la case la coche.
  div.hexa {
    .hexa-style();
    .transition();
    margin: 0.2rem;
    position: relative;

    &:hover {
      .hexa-style(rgba(255, 255, 255, 0.425), rgba(0, 0, 0, 0.288));
    }

    input {
      position: absolute;
      width: 100%;
      height: 100%;
      opacity: 0;
      z-index: 1;
      margin: 0;
      cursor: pointer;
    }

    &.checked {
      .hexa-style(rgb(0, 0, 0), rgba(0, 0, 0, 0.288));
      &:hover { .hexa-style(rgb(43, 43, 43), rgba(0, 0, 0, 0.288)); }
    }
  }

  // ── Capacités de créature ───────────────────────────────────────────
  .creature-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; }
    }

    .item-name {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 8px;

      .item-roll { cursor: pointer; }
    }

    .capacity-type {
      flex: 0 0 auto;
      font-size: @font-size-12;
      color: @color-amber;
      text-transform: uppercase;
    }

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

  h4 {
    a.item-control {
      color: inherit;
      opacity: 0.85;

      &:hover { opacity: 1; }
    }
  }

}