@layer components {
  /* ======================
   * FAVOURITE STAR
   * ======================
   * Inline clickable star button for favouriting items.
   * Uses turbo frame for instant updates.
   */
  .favourite-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem; /* Prevent shrinking */
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background-color 0.15s ease;
  }

  .favourite-star:hover {
    background-color: var(--color-grey-100);
  }

  .favourite-star:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
  }

  .favourite-star__icon {
    font-size: var(--text-lg);
    transition: color 0.15s ease, transform 0.15s ease;
  }

  /* Default (not favourited) - grey outline */
  .favourite-star__icon--default {
    color: var(--color-grey-400);
  }

  .favourite-star:hover .favourite-star__icon--default {
    color: var(--color-orange);
  }

  /* Favourited - orange filled */
  .favourite-star__icon--active {
    color: var(--color-orange);
  }

  .favourite-star:hover .favourite-star__icon--active {
    transform: scale(1.1);
  }

  /* Table column for star */
  .data-table__th--star,
  .data-table__td--star {
    width: 3rem;
    padding-inline: 0;
    text-align: center;
  }
}