// Item sheets styles

.item-sheet {
  min-width: 500px;
  min-height: 400px;

  .sheet-header {
    .flex-row();
    gap: @spacing-medium;
    padding: @spacing-medium;
    background: lighten(@color-secondary, 65%);
    border-bottom: 2px solid @color-primary;

    img.item-sheet-img {
      flex: 0 0 48px;
      width: 48px;
      height: 48px;
      object-fit: cover;
      border: 2px solid @color-border;
      border-radius: @input-border-radius;
      cursor: pointer;

      &:hover {
        border-color: @color-primary;
      }
    }

    .header-fields {
      flex: 1;

      h1 {
        margin: 0 0 @spacing-base 0;
        font-size: 1.2rem;
        font-weight: bold;
        border: none;

        input {
          font-size: 1.2rem;
          font-weight: bold;
          border: none;
          background: transparent;

          &:focus {
            background: white;
            border: @input-border;
          }
        }
      }
    }

    .header-actions {
      .flex-row();
      gap: @spacing-base;

      button {
        padding: @spacing-small @spacing-base;
        font-size: @font-size-small;
      }
    }
  }

  .sheet-body {
    padding: @spacing-medium;
  }

  // Predilections section
  .predilections-list {
    .predilection-item {
      padding: @spacing-base;
      margin-bottom: @spacing-small;
      border: 1px solid lighten(@color-border, 15%);
      border-radius: @input-border-radius;

      .predilection-header {
        .flex-row();
        margin-bottom: @spacing-small;

        input[type="text"] {
          flex: 1;
        }

        input[type="checkbox"] {
          margin: 0 @spacing-small;
        }
      }

      .predilection-description {
        textarea {
          width: 100%;
          min-height: 40px;
        }
      }
    }
  }

  // Automation section
  .automation-item {
    padding: @spacing-base;
    margin-bottom: @spacing-small;
    background: lighten(@color-secondary, 70%);
    border-radius: @input-border-radius;

    hr {
      margin: @spacing-small 0;
      border: none;
      border-top: 1px solid @color-border;
    }
  }
}