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

// ============================================================
// ITEM SHEETS — Shared item sheet layout (all item types)
// ============================================================

.oathhammer .item-sheet-common {
  overflow: auto;
  padding: 10px 20px;            // Inner margin so content clears the parchment border
  font-family: @font-body;       // Calibri — standard text per design_rules.md
  font-size: @font-size-base;
  .sheet-background();

  .header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 2px solid @color-blue;

    // Item name input — decorative title font
    input[name="name"] {
      font-family: @font-primary;  // Sherwood — decorative title
    }
  }

  .item-img {
    height: @item-sheet-img;
    width: @item-sheet-img;
    border: 2px solid @color-olive;
    border-radius: 4px;
    cursor: pointer;
    object-fit: cover;
  }

  // Override Foundry dark-theme input/select backgrounds for parchment look
  input:not([type="checkbox"]),
  select {
    height: 1.5rem;
    background-color: @color-input-bg;
    border-color: @color-blue;
    color: @color-dark;
  }

  // Checkboxes: natural size, no custom background
  input[type="checkbox"] {
    width: auto;
    height: auto;
    background-color: transparent;
    border-color: @color-blue;
  }

  input[name="name"] {
    height: 2.5rem;
    font-family: @font-primary;
    font-size: @font-size-xl;
    font-weight: bold;
    border: none;
    border-bottom: 2px solid @color-blue;
    background: transparent;
  }

  label {
    font-family: @font-secondary;
    font-size: @font-size-base;
    color: @color-dark;
  }

  .form-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;

    & > label {
      flex: 0 0 8rem;        // Fixed label width, no grow/shrink
      font-family: @font-secondary;
      font-size: @font-size-base;
      color: @color-dark;
    }

    .form-fields {
      flex: 1;
      min-width: 0;

      input:not([type="checkbox"]),
      select {
        width: 100%;
        box-sizing: border-box;
      }
    }
  }

  .align-top {
    flex: 1;
    min-width: 0;
    align-self: flex-start;
    padding: 0 0.3rem;
  }

  .shift-right {
    margin-left: 2rem;
  }

  fieldset {
    margin-top: 6px;
    border-color: @color-olive;
    border-radius: 4px;
  }

  legend {
    font-family: @font-secondary;
    font-size: @font-size-lg;
    font-weight: bold;
    color: @color-blue;
  }

  // ── Enchantment fieldset ─────────────────────────────────────
  .enchantment-fieldset {
    .enchant-cursed-label {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
      margin-left: 8px;
      font-family: @font-secondary;
      font-size: @font-size-base;
      color: @color-dark;
      white-space: nowrap;

      input[type="checkbox"] {
        margin: 0;
      }
    }
  }

  // ── Class proficiency checkboxes ────────────────────────────
  .proficiency-section {
    display: flex;
    gap: 8px;
    margin-top: 8px;

    .proficiency-fieldset {
      flex: 1;
    }

    .proficiency-checkboxes {
      display: flex;
      flex-wrap: wrap;
      gap: 4px 12px;
      padding: 4px 2px;
    }

    .proficiency-option {
      display: flex;
      align-items: center;
      gap: 4px;
      font-family: @font-body;
      font-size: @font-size-base;
      color: @color-dark;
      cursor: pointer;
      white-space: nowrap;

      input[type="checkbox"] {
        width: auto;
        height: auto;
        accent-color: @color-blue;
      }
    }
  }
}


// SkillNPC sheet — vertical stack layout
.oathhammer .skillnpc-sheet {
  .skillnpc-stats {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 6px;

    .form-group > label {
      flex: 0 0 9rem;
    }
  }
}

// NpcAttack sheet — vertical stack layout (mirrors skillnpc)
.oathhammer .npcattack-sheet {
  .npcattack-stats {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 6px;

    .form-group > label {
      flex: 0 0 9rem;
    }
  }
}

// Regiment sheet
.oathhammer .regiment-sheet {
  display: flex;
  flex-direction: column;
  gap: 6px;

  .regiment-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 4px;

    .form-group > label { flex: 0 0 6rem; }
  }

  .regiment-armor-fields {
    display: flex;
    gap: 4px;
    input[type="number"] { width: 3rem; }
  }

  .regiment-skill-row,
  .regiment-attack-row,
  .regiment-trait-row {
    display: grid;
    gap: 4px;
    margin-bottom: 2px;
    align-items: center;

    input, select { font-size: @font-size-sm; padding: 1px 3px; }
    a.item-delete { text-align: center; color: @color-dark; opacity: 0.4; &:hover { color: #c0392b; opacity: 1; } }
  }

  .regiment-skill-header,
  .regiment-attack-header {
    font-weight: bold;
    font-size: @font-size-xs;
    color: @color-dark;
    opacity: 0.6;
    text-transform: uppercase;
  }

  .regiment-skill-row  { grid-template-columns: 1fr 3rem 6rem 1.5rem; }
  .regiment-attack-row { grid-template-columns: 1fr 3.5rem 6rem 3rem 1fr 1.5rem; }
  .regiment-trait-row  { grid-template-columns: 1fr 2fr 1.5rem; }
}