// ============================================================
// 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;
  }
}