fvtt-oath-hammer/less/item-list.less

// ============================================================
// ITEM LIST — Used in actor sheet tabs (weapons, spells, etc.)
// ============================================================

.oathhammer {

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

  // Header row shared by all lists
  .item-list-header {
    display: grid;
    align-items: center;
    gap: 4px;
    padding: 2px 4px 3px;
    border-bottom: 1px solid @color-olive;
    margin-bottom: 2px;
    font-family: @font-secondary;
    font-size: @font-size-xs;
    color: @color-blue;
    span { text-align: center; }
    .col-name { text-align: left; }
  }

  // Data row
  .item-entry {
    display: grid;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
    border-bottom: 1px solid @color-olive-faint;
    &:hover { background-color: @color-blue-hover; }

    .item-img {
      width: @item-img-size;
      height: @item-img-size;
      border: 1px solid @color-olive;
      border-radius: 2px;
      object-fit: cover;
      align-self: center;
      justify-self: center;
      flex-shrink: 0;
    }

    .item-name {
      font-family: @font-body;
      font-size: @font-size-base;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0;
    }

    .item-detail {
      font-size: @font-size-xs;
      color: @color-dark;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .item-group {
      font-size: @font-size-xs;
      color: @color-dark;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .item-magic {
      text-align: center;
      font-size: @font-size-xs;
      color: #8e44ad;
    }

    .item-type {
      font-size: @font-size-xs;
      color: @color-blue;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .item-equipped {
      display: flex;
      align-items: center;
      justify-content: center;
      input[type="checkbox"] {
        width: 0.95rem;
        height: 0.95rem;
        cursor: pointer;
        margin: 0;
      }
    }

    .item-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 4px;
      a {
        .transition-opacity();
        font-size: @font-size-sm;
        &:hover { color: @color-blue; }
      }
    }
  }

  // ── Per-list grid templates ──────────────────────────────
  // Format: [img] [name] [detail cols...] [equipped?] [actions]

  .item-list--weapon {
    .item-list-header, .item-entry {
      grid-template-columns: @item-img-size 1fr 4.5rem 3.5rem 2rem 1.5rem 1.8rem 9rem;
    }
  }

  // Settlement inventory: simpler lists (no equip slot, no qty)
  .item-list--weapons {
    .item-list-header, .item-entry {
      grid-template-columns: @item-img-size 1fr 6rem 4rem;
    }
  }

  .item-list--armor {
    .item-list-header, .item-entry {
      grid-template-columns: @item-img-size 1fr 3.5rem 2.5rem 3.5rem 1.5rem 1.8rem 5.5rem;
    }
  }

  .item-list--armors {
    .item-list-header, .item-entry {
      grid-template-columns: @item-img-size 1fr 6rem 4rem;
    }
  }

  .item-list--ammo {
    .item-list-header, .item-entry {
      grid-template-columns: @item-img-size 1fr 4rem 3.5rem;
    }
  }

  .item-list--spell {
    .item-list-header, .item-entry {
      // img | name | DV | Tradition | Range | Duration | SpellSave | actions
      grid-template-columns: @item-img-size 1fr 2.5rem 5.5rem 3.5rem 4.5rem 3.5rem 5rem;
    }
  }

  .item-list--miracle {
    .item-list-header, .item-entry {
      // img | name | DivineTradition | actions
      grid-template-columns: @item-img-size 1fr 6rem 5rem;
    }
  }

  .miracles-blocked {
    opacity: 0.45;
    pointer-events: none;
  }

  .item-list--equipment {
    .item-list-header, .item-entry {
      grid-template-columns: @item-img-size 1fr 5rem 3rem 3.5rem;
    }
  }

  .item-list--magic-item {
    .item-list-header, .item-entry {
      grid-template-columns: @item-img-size 1fr 5rem 3.5rem;
    }
  }

  .item-list--condition {
    .item-list-header, .item-entry {
      grid-template-columns: @item-img-size 1fr 5.5rem 3.5rem;
    }
  }

  .item-list--trait {
    .item-list-header, .item-entry {
      grid-template-columns: @item-img-size 1fr 6rem 6rem 3.5rem;
    }
  }

  .item-list--oath {
    .item-list-header, .item-entry {
      grid-template-columns: @item-img-size 1fr 7rem 3.5rem 3.5rem;
    }
  }

  // ── NPC-specific grid variants ───────────────────────────────
  // NPC Skill list: [color emoji] [name] [pool] [threshold] [roll btn] [actions]
  .item-list--npc-skill {
    .item-list-header, .item-entry {
      grid-template-columns: 1.8rem 1fr 3.5rem 3.5rem 2rem 4.5rem;
    }
  }

  // NPC Weapon list: [img] [name] [damage] [AP] [actions incl attack+dmg+edit+del]
  .item-list--npc-weapon {
    .item-list-header, .item-entry {
      grid-template-columns: @item-img-size 1fr 3.5rem 2.5rem 7rem;
    }
  }

  // NPC Trait list: [img] [name] [type badge] [actions]
  .item-list--npc-trait {
    .item-list-header, .item-entry {
      grid-template-columns: @item-img-size 1fr 6rem 3.5rem;
    }
  }

  // NPC Armor list: [img] [name] [AV] [penalty] [actions]
  .item-list--npc-armor {
    .item-list-header, .item-entry {
      grid-template-columns: @item-img-size 1fr 3rem 3rem 3.5rem;
    }
  }

  // NPC Equipment list: [img] [name] [actions]
  .item-list--npc-equip {
    .item-list-header, .item-entry {
      grid-template-columns: @item-img-size 1fr 3.5rem;
    }
  }

  // NPC Attack list: [img] [name] [damage] [AP] [actions: roll+edit+del]
  .item-list--npc-attack {
    .item-list-header, .item-entry {
      grid-template-columns: @item-img-size 1fr 7rem 3rem 6rem;
    }
  }

  .item-usage {
    font-size: @font-size-xs;
    color: @color-dark;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .item-violated {
    text-align: center;
    font-size: @font-size-sm;
    i.fa-circle-xmark { color: #c0392b; }
    i.fa-circle-check { color: #27ae60; }
  }

  .oath--violated {
    background-color: fade(#c0392b, 8%);
    .item-name { color: #c0392b; }
  }

  .no-items {
    color: @color-olive;
    font-style: italic;
    font-size: @font-size-xs;
    padding: 4px;
  }

  .create-btn {
    margin-left: 6px;
    color: @color-blue;
    .transition-opacity();
  }
}

// Miracle blocked banner on the Magic tab
.miracle-blocked-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  background: fade(#c0392b, 10%);
  border: 1px solid fade(#c0392b, 45%);
  border-radius: 4px;
  padding: 4px 10px;
  margin-bottom: 4px;
  color: #c0392b;
  font-size: @font-size-xs;
  font-weight: bold;

  span { flex: 1; }

  a {
    color: @color-dark;
    font-weight: normal;
    font-size: @font-size-sm;
    .transition-opacity();
    white-space: nowrap;
    i { color: @color-gold; }
  }
}

// Slots counter on the Combat tab
.slots-counter {
  display: flex;
  gap: 6px;
  padding: 2px 6px 4px;

  .slots-label {
    font-size: @font-size-xs;
    font-weight: bold;
    color: @color-dark;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .slots-value {
    font-size: @font-size-xs;
    font-weight: bold;
    color: @color-dark;
    background: fade(@color-gold, 15%);
    border: 1px solid fade(@color-gold, 40%);
    border-radius: 4px;
    padding: 1px 8px;
    min-width: 3.5rem;
    text-align: center;

    &.slots-over {
      color: #c0392b;
      background: fade(#c0392b, 10%);
      border-color: fade(#c0392b, 40%);
    }
  }
}

// ── Regiment list (settlement garrison tab) ──────────────────────────────────
.oathhammer {
  .item-list--regiment {
    .item-list-header, .item-entry {
      grid-template-columns: @item-img-size 1fr 4rem 5rem 4rem 4.5rem;
    }
  }
}