/* Entry Row Components
 * List and entry row styles following BEM convention
 * Using Tailwind v4 @utility with @layer components
 * Note: Renamed from list-item to avoid conflict with CSS display: list-item
 */

@utility entry-row {
  @layer components {
    @apply flex justify-between items-start p-3 bg-gray-50 rounded-lg;
  }
}

@utility entry-row--interactive {
  @layer components {
    @apply hover:bg-gray-100 transition duration-200;
  }
}

@utility entry-row--bordered {
  @layer components {
    @apply flex justify-between items-center py-2 border-b border-gray-200 bg-transparent rounded-none hover:bg-gray-50;
  }
}

@utility entry-row--pending {
  @layer components {
    @apply border border-dashed border-gray-300 opacity-60 hover:border-green-400 hover:border-solid hover:opacity-100 transition-all duration-200;
  }
}

@utility entry-row__title {
  @layer components {
    @apply font-medium text-gray-900;
  }
}

@utility entry-row__subtitle {
  @layer components {
    @apply text-sm text-gray-600;
  }
}

@utility entry-row__value {
  @layer components {
    @apply text-sm font-medium text-gray-700;
  }
}

@utility entry-row__hint {
  @layer components {
    @apply text-xs text-gray-500;
  }
}

/* Background variants — combine with entry-row: class="entry-row entry-row--dark" */

@utility entry-row--transparent {
  @layer components {
    @apply bg-transparent;
  }
}

@utility entry-row--light {
  @layer components {
    @apply bg-gray-100;
  }
}

@utility entry-row--dark {
  @layer components {
    @apply bg-gray-200 hover:bg-gray-300;
  }
}