@layer components {
  /* Drag-and-drop arrangement styles */
  .arrangement__container {
    & .arrangement__item {
      transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;

      &.is-dragging {
        opacity: 0.6;
        transform: scale(1.02);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        border: 1px dashed var(--bs-primary, #0d6efd);
        background-color: var(--bs-light, #f8f9fa);
        border-radius: var(--border-radius);
        padding: 3px;
      }
    }
  }

  /* Arrangement items via data attribute (used by Stimulus controller) */
  [data-arrangement-target="item"] {
    transition:
      opacity 0.2s ease,
      transform 0.2s ease,
      box-shadow 0.2s ease;

    &.is-dragging {
      opacity: 0.6;
      transform: scale(1.02);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      border: 1px dashed var(--color-blue, #0d6efd);
      background-color: var(--color-gray-lightest, #f8f9fa);
      border-radius: var(--border-radius);
    }
  }

  /* Lots list with CSS counters for automatic numbering */
  .lots-list {
    counter-reset: lot-counter;
  }

  .lot-number {
    counter-increment: lot-counter;

    &::before {
      content: counter(lot-counter) ".";
    }
  }
}